~/css/tailwind-kbd-keys

6 Tailwind Keyboard Keys

6 TailwindPublished 2026-10-04Free · no sign-up

Six keyboard key designs in Tailwind: inline keys in a sentence, dark keycaps, a shortcuts help panel, a search button with a shortcut hint, large pressable 3D keycaps and shortcut chips in a menu.

Filter demos

01. Tailwind Keyboard Keys

TailwindKbd

Keyboard key styling for kbd elements: a light key face, a thicker bottom border for depth and a monospace font. Wrapping each key in its own kbd lets screen readers and search engines recognise the shortcut.

View code

<p class="text-[15px] text-slate-700">Press <kbd class="rounded-md border border-b-[3px] border-slate-300 bg-white px-1.5 py-0.5 font-mono text-[13px] font-semibold text-slate-900">Ctrl</kbd> + <kbd class="rounded-md border border-b-[3px] border-slate-300 bg-white px-1.5 py-0.5 font-mono text-[13px] font-semibold text-slate-900">K</kbd> to search.</p>

02. Tailwind Dark Keycaps

TailwindDark

Dark keycaps with an inset highlight on top and a shadow below, made with an arbitrary box-shadow value. They suit dark docs and command palettes, and the key labels stay at high contrast.

View code

<div class="flex gap-2">
  <kbd class="grid h-10 min-w-10 place-items-center rounded-lg bg-slate-800 px-2.5 font-mono text-sm font-bold text-slate-100 shadow-[inset_0_1px_0_rgba(255,255,255,.12),0_3px_0_#0b0f19]">&#8984;</kbd>
  <kbd class="grid h-10 min-w-10 place-items-center rounded-lg bg-slate-800 px-2.5 font-mono text-sm font-bold text-slate-100 shadow-[inset_0_1px_0_rgba(255,255,255,.12),0_3px_0_#0b0f19]">Shift</kbd>
  <kbd class="grid h-10 min-w-10 place-items-center rounded-lg bg-slate-800 px-2.5 font-mono text-sm font-bold text-slate-100 shadow-[inset_0_1px_0_rgba(255,255,255,.12),0_3px_0_#0b0f19]">P</kbd>
</div>

03. Tailwind Shortcut List

TailwindHelp

A keyboard shortcuts help panel laid out as a description list, with the action on the left and its keys on the right. dl, dt and dd give the pairs meaning, and justify-between aligns the keys neatly in a column.

View code

<dl class="w-full max-w-sm divide-y divide-slate-100 rounded-2xl bg-white px-5 text-sm shadow-lg shadow-slate-900/5">
  <div class="flex items-center justify-between py-3"><dt class="text-slate-700">Search</dt><dd><kbd class="rounded border border-b-2 border-slate-300 px-1.5 font-mono text-xs">/</kbd></dd></div>
  <div class="flex items-center justify-between py-3"><dt class="text-slate-700">New order</dt><dd class="flex gap-1"><kbd class="rounded border border-b-2 border-slate-300 px-1.5 font-mono text-xs">N</kbd></dd></div>
  <div class="flex items-center justify-between py-3"><dt class="text-slate-700">Save</dt><dd class="flex gap-1"><kbd class="rounded border border-b-2 border-slate-300 px-1.5 font-mono text-xs">Ctrl</kbd><kbd class="rounded border border-b-2 border-slate-300 px-1.5 font-mono text-xs">S</kbd></dd></div>
  <div class="flex items-center justify-between py-3"><dt class="text-slate-700">Close panel</dt><dd><kbd class="rounded border border-b-2 border-slate-300 px-1.5 font-mono text-xs">Esc</kbd></dd></div>
</dl>

04. Tailwind Search with Shortcut Hint

TailwindSearch

A search button that shows its keyboard shortcut on the right, the pattern used in documentation sites. The whole thing is one button with an accessible name of Search, and the shortcut keys are aria-hidden to avoid noisy reading.

View code

<button class="flex w-full max-w-xs items-center gap-3 rounded-xl border border-slate-700 bg-slate-900 px-3 py-2.5 text-left text-sm text-slate-400 hover:border-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-400">
  <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
  <span class="flex-1">Search</span>
  <span aria-hidden="true" class="flex gap-1"><kbd class="rounded border border-slate-600 px-1.5 font-mono text-xs text-slate-300">Ctrl</kbd><kbd class="rounded border border-slate-600 px-1.5 font-mono text-xs text-slate-300">K</kbd></span>
</button>

05. Tailwind Large Keycaps

Tailwind3D

Chunky 3D keycaps for tutorials and game guides, with a darker bottom edge and a pressed state on click via active:translate-y-0.5. They are buttons here so you can see the press effect; use kbd for static shortcut text.

View code

<div class="flex gap-3">
  <button class="h-14 w-14 rounded-xl border-b-4 border-slate-400 bg-slate-100 font-mono text-lg font-bold text-slate-800 transition active:translate-y-0.5 active:border-b-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600">W</button>
  <button class="h-14 w-14 rounded-xl border-b-4 border-slate-400 bg-slate-100 font-mono text-lg font-bold text-slate-800 transition active:translate-y-0.5 active:border-b-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600">A</button>
  <button class="h-14 w-14 rounded-xl border-b-4 border-slate-400 bg-slate-100 font-mono text-lg font-bold text-slate-800 transition active:translate-y-0.5 active:border-b-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600">S</button>
  <button class="h-14 w-14 rounded-xl border-b-4 border-slate-400 bg-slate-100 font-mono text-lg font-bold text-slate-800 transition active:translate-y-0.5 active:border-b-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600">D</button>
</div>

06. Tailwind Shortcut Combo Chips

TailwindTooltip

Small shortcut chips shown next to menu items, joining keys with a thin plus sign in a muted colour. Using separate kbd elements for each key keeps the combo readable as Ctrl plus Shift plus Z.

View code

<ul class="w-full max-w-xs rounded-xl border border-slate-800 bg-slate-950 p-1.5 text-sm">
  <li class="flex items-center justify-between rounded-lg px-3 py-2 text-slate-200 hover:bg-slate-800">Undo <span class="flex items-center gap-1 text-slate-500"><kbd class="rounded bg-slate-800 px-1.5 font-mono text-xs text-slate-300">Ctrl</kbd>+<kbd class="rounded bg-slate-800 px-1.5 font-mono text-xs text-slate-300">Z</kbd></span></li>
  <li class="flex items-center justify-between rounded-lg px-3 py-2 text-slate-200 hover:bg-slate-800">Redo <span class="flex items-center gap-1 text-slate-500"><kbd class="rounded bg-slate-800 px-1.5 font-mono text-xs text-slate-300">Ctrl</kbd>+<kbd class="rounded bg-slate-800 px-1.5 font-mono text-xs text-slate-300">Shift</kbd>+<kbd class="rounded bg-slate-800 px-1.5 font-mono text-xs text-slate-300">Z</kbd></span></li>
</ul>

About these Tailwind Keyboard Keys

Use the kbd element

Each key belongs in its own kbd element, which marks it as keyboard input for assistive technology and search engines.

Depth from borders

A thicker bottom border, border-b-[3px], or an arbitrary box-shadow gives keys their raised look.

Shortcut lists

A description list pairs each action with its keys; dt and dd give the pairs meaning, and justify-between aligns the keys.

Hide decorative hints

When a button already says Search, its shortcut hint can be aria-hidden so it is not read as noise.

Frequently asked questions

Do these need JavaScript?

No.

Mac or Windows symbols?

Show the right modifier for the visitor's platform, or show both.

Is there a CSS version?

Yes, see the CSS kbd keys collection.