Tailwind CSS Kbd Components

                            <div class="p-4 flex flex-wrap gap-4 justify-center items-center">
  <kbd class="px-1 py-0.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">
    Xsmall
  </kbd>
  <kbd class="px-1.5 py-1 text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">
    Small
  </kbd>
  <kbd class="px-2 py-1.5 text-base font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-lg shadow-sm">
    Medium
  </kbd>
  <kbd class="px-3 py-2 text-lg font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-lg shadow-sm">
    Large
  </kbd>
  <kbd class="px-4 py-2.5 text-xl font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-xl shadow-sm">
    Xlarge
  </kbd>
</div> 
                        

                            <div class="p-4 text-center">
  <p class="text-gray-700">
    Press
    <kbd class="px-1.5 py-0.5 mx-1 text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm inline-flex items-center justify-center">
      F
    </kbd>
    to pay respects.
  </p>
</div> 
                        

                            <div class="p-4 flex flex-wrap gap-3 justify-center items-center">
  <kbd class="px-2 py-1 text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">
    ⌘
  </kbd>
  <kbd class="px-2 py-1 text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">
    ⌥
  </kbd>
  <kbd class="px-2 py-1 text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">
    ⇧
  </kbd>
  <kbd class="px-2 py-1 text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">
    ⌃
  </kbd>
</div> 
                        

                            <div class="p-6 flex flex-col items-center justify-center gap-1">
  <div class="my-1 flex w-full justify-center gap-1">
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">q</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">w</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">e</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">r</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">t</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">y</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">u</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">i</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">o</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">p</kbd>
  </div>
  <div class="my-1 flex w-full justify-center gap-1">
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">a</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">s</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">d</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">f</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">g</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">h</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">j</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">k</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">l</kbd>
  </div>
  <div class="my-1 flex w-full justify-center gap-1">
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">z</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">x</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">c</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">v</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">b</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">n</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">m</kbd>
    <kbd class="w-8 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">/</kbd>
  </div>
</div> 
                        

                            <div class="p-4 flex flex-wrap gap-2 justify-center items-center">
  <kbd class="px-2 py-1 text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">
    ctrl
  </kbd>
  <span class="text-gray-600 font-medium">+</span>
  <kbd class="px-2 py-1 text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">
    shift
  </kbd>
  <span class="text-gray-600 font-medium">+</span>
  <kbd class="px-2 py-1 text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">
    del
  </kbd>
</div> 
                        

                            <div class="p-4 flex flex-wrap gap-4 justify-center items-center">
  <kbd class="px-2 py-1.5 text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-lg shadow-sm">
    K
  </kbd>
</div>
                        

                            <div class="p-6 flex flex-col items-center gap-2">
  <div class="flex w-full justify-center">
    <kbd class="w-10 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">▲</kbd>
  </div>
  <div class="flex w-full justify-center gap-4">
    <kbd class="w-10 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">◀︎</kbd>
    <kbd class="w-10 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">▶︎</kbd>
  </div>
  <div class="flex w-full justify-center">
    <kbd class="w-10 h-8 flex items-center justify-center text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm">▼</kbd>
  </div>
</div>