Keyboard Keys (kbd) — Shortcut Key UI HTML CSS JS

<div class="kbd-card">
  <h3>Keyboard shortcuts</h3>
  <ul class="kbd-list" id="kbdList"></ul>
  <p class="kbd-hint">Press any shortcut below — the keys light up.</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f1f5f9;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}

.kbd-card{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:400px;box-shadow:0 18px 44px rgba(15,23,42,.08)}
.kbd-card h3{font-size:16px;font-weight:800;color:#0f172a;margin-bottom:16px}

.kbd-list{list-style:none;display:flex;flex-direction:column;gap:13px}
.kbd-list li{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kbd-desc{font-size:13.5px;color:#475569;font-weight:600}
.kbd-combo{display:flex;align-items:center;gap:5px}
.kbd-plus{color:#cbd5e1;font-size:12px;font-weight:700}

kbd,.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 7px;
  font-family:inherit;font-size:12px;font-weight:700;color:#334155;
  background:linear-gradient(180deg,#fff,#f1f5f9);border:1px solid #cbd5e1;
  border-radius:7px;box-shadow:0 2px 0 #cbd5e1,inset 0 1px 0 #fff;
  transition:transform .08s,box-shadow .08s,background .08s}
.kbd.kbd-down{transform:translateY(2px);box-shadow:0 0 0 #cbd5e1,inset 0 1px 0 #fff;background:linear-gradient(180deg,#eef2ff,#e0e7ff);color:#4f46e5;border-color:#a5b4fc}

// Each shortcut: the keys to display, the matching event keys, and a label.
var SHORTCUTS = [
  { keys: ['⌘', 'K'], match: ['meta', 'k'], desc: 'Open command palette' },
  { keys: ['⌘', 'S'], match: ['meta', 's'], desc: 'Save' },
  { keys: ['⌘', '⇧', 'P'], match: ['meta', 'shift', 'p'], desc: 'Command menu' },
  { keys: ['/'], match: ['/'], desc: 'Focus search' },
  { keys: ['Esc'], match: ['escape'], desc: 'Close / cancel' },
];

var list = document.getElementById('kbdList');
list.innerHTML = SHORTCUTS.map(function (s, si) {
  var combo = s.keys.map(function (k, ki) {
    return (ki ? '<span class="kbd-plus">+</span>' : '') + '<kbd class="kbd" data-s="' + si + '" data-k="' + ki + '">' + k + '</kbd>';
  }).join('');
  return '<li><span class="kbd-desc">' + s.desc + '</span><span class="kbd-combo">' + combo + '</span></li>';
}).join('');

function setDown(si, down) {
  list.querySelectorAll('kbd[data-s="' + si + '"]').forEach(function (el) { el.classList.toggle('kbd-down', down); });
}

// Light up the matching shortcut's keys while it is held.
document.addEventListener('keydown', function (e) {
  var typing = /^(input|textarea|select)$/i.test((e.target.tagName || ''));
  SHORTCUTS.forEach(function (s, si) {
    var ok = s.match.every(function (m) {
      if (m === 'meta') return e.metaKey || e.ctrlKey;
      if (m === 'shift') return e.shiftKey;
      return e.key.toLowerCase() === m;
    });
    if (ok) {
      if (!typing) e.preventDefault();
      setDown(si, true);
    }
  });
});
document.addEventListener('keyup', function () {
  SHORTCUTS.forEach(function (s, si) { setDown(si, false); });
});