Components

Tailwind CSS KBD (Keyboard)

Tailwind css KBD component is used to allow users to input data using keyboard or any other input device.

image

In other elements like text, tables, cards, and more, the KBD component can be used to show text input from the keyboard.

Requires Pagedone CSS

This component requires the use of our Pagedone UI as a package, else you can skip this message if you are already using Pagedone UI as a package.

Default KBD

Following is the list of KBD components which can be used inside any other element.

Shift Ctrl Tab Caps Lock Esc Alt Spacebar Enter Back Space 
<kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">Shift</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">Ctrl</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">Tab</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">Caps Lock</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">Esc</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">Alt</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">Spacebar</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">Enter</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">Back Space</kbd>

KBD with inner shadow

Use following KBD Tailwind Example which shows shadow on inner side of the buttons.

Shift Ctrl Tab Caps Lock Esc Alt Spacebar Enter Back Space 
 <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-inner-custom">Shift</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-inner-custom">Ctrl</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-inner-custom">Tab</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-inner-custom">Caps Lock</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-inner-custom">Esc</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-inner-custom">Alt</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-inner-custom">Spacebar</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-inner-custom">Enter</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-inner-custom">Back Space</kbd>

KBD with Outer shadow

Use following KBD Example designed in Tailwind CSS which shows shadow on outer side of the buttons.

Shift Ctrl Tab Caps Lock Esc Alt Spacebar Enter Back Space 
<kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-outer">Shift</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-outer">Ctrl</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-outer">Tab</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-outer">Caps Lock</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-outer">Esc</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-outer">Alt</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-outer">Spacebar</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-outer">Enter</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg shadow-outer">Back Space</kbd>

KBD Style

Use this different style of KBD Component, Which shows shadow inside out in buttons.

Shift Ctrl Tab Caps Lock Esc Alt Spacebar Enter Back Space 
 <kbd class="px-3 py-2.5 text-sm font-semibold text-gray-900 bg-gray-100 border border-white rounded-lg shadow-custom">Shift</kbd>
      <kbd class="px-3 py-2.5 text-sm font-semibold text-gray-900 bg-gray-100 border border-white rounded-lg shadow-custom">Ctrl</kbd>
      <kbd class="px-3 py-2.5 text-sm font-semibold text-gray-900 bg-gray-100 border border-white rounded-lg shadow-custom">Tab</kbd>
      <kbd class="px-3 py-2.5 text-sm font-semibold text-gray-900 bg-gray-100 border border-white rounded-lg shadow-custom">Caps Lock</kbd>
      <kbd class="px-3 py-2.5 text-sm font-semibold text-gray-900 bg-gray-100 border border-white rounded-lg shadow-custom">Esc</kbd>
      <kbd class="px-3 py-2.5 text-sm font-semibold text-gray-900 bg-gray-100 border border-white rounded-lg shadow-custom">Alt</kbd>
      <kbd class="px-3 py-2.5 text-sm font-semibold text-gray-900 bg-gray-100 border border-white rounded-lg shadow-custom">Spacebar</kbd>
      <kbd class="px-3 py-2.5 text-sm font-semibold text-gray-900 bg-gray-100 border border-white rounded-lg shadow-custom">Enter</kbd>
      <kbd class="px-3 py-2.5 text-sm font-semibold text-gray-900 bg-gray-100 border border-white rounded-lg shadow-custom">Back Space</kbd>

KBD for MAC

Here’s a list of KBD components that you can use inside any other element.

Cmd Win Option 
<kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">Cmd</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">Win</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">Option</kbd>

KBD inside text

This is how you can use KBD components inside paragraphs.

Please press Ctrl + Shift + Esc to open task manager.

Save the document by pressing Ctrl + S 

<p class="text-gray-600 text-base"> Please press <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">Ctrl</kbd> + <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">Shift</kbd> + <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">Esc</kbd> to open task manager. </p>
      <p class="text-gray-600 text-base"> Save the document by pressing <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">Ctrl</kbd> + <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">S</kbd></p>

Arrow keys

Arrow keys can be used as shown in the following tailwind keyboard example.

Arrow key up Arrow key down Arrow key left Arrow key right 
<kbd class="inline-flex items-center px-3 py-2 text-gray-900 bg-white border border-gray-200 rounded-lg ">
      <svg class="w-3.5 h-3.5" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M5.70143 2.25C6.27878 1.25 7.72216 1.25 8.29951 2.25L12.6296 9.75C13.207 10.75 12.4853 12 11.3306 12H2.67034C1.51564 12 0.793953 10.75 1.3713 9.75L5.70143 2.25Z" fill="#111827" />
      </svg>
      <span class="sr-only">Arrow key up</span>
      </kbd>
      <kbd class="inline-flex items-center px-3 py-2 text-gray-900 bg-white border border-gray-200 rounded-lg ">
      <svg class="w-3.5 h-3.5" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M5.70143 11.2656C6.27878 12.2656 7.72216 12.2656 8.29951 11.2656L12.6296 3.76562C13.207 2.76562 12.4853 1.51562 11.3306 1.51562H2.67034C1.51564 1.51562 0.793953 2.76562 1.3713 3.76562L5.70143 11.2656Z" fill="#111827" />
      </svg>
      <span class="sr-only">Arrow key down</span>
      </kbd>
      <kbd class="inline-flex items-center px-3 py-2 text-gray-900 bg-white border border-gray-200 rounded-lg ">
      <svg class="w-3.5 h-3.5" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M2.55371 5.70094C1.55371 6.27829 1.55371 7.72167 2.55371 8.29902L10.0537 12.6291C11.0537 13.2065 12.3037 12.4848 12.3037 11.3301L12.3037 2.66985C12.3037 1.51515 11.0537 0.793465 10.0537 1.37081L2.55371 5.70094Z" fill="#111827" />
      </svg>
      <span class="sr-only">Arrow key left</span>
      </kbd>
      <kbd class="inline-flex items-center px-3 py-2 text-gray-900 bg-white border border-gray-200 rounded-lg ">
      <svg class="w-3.5 h-3.5" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M11.4463 5.70094C12.4463 6.27829 12.4463 7.72167 11.4463 8.29902L3.94629 12.6291C2.94629 13.2065 1.69629 12.4848 1.69629 11.3301L1.69629 2.66985C1.69629 1.51515 2.94629 0.793465 3.94629 1.37081L11.4463 5.70094Z" fill="#111827" />
      </svg>
      <span class="sr-only">Arrow key right</span>
      </kbd>

Special Keys

Special keys also can be shown as tailwind keyboard styled elements. Check this example.

 <kbd class="inline-flex items-center px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">
      <svg class="w-3.5 h-3.5" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M4.90689 5.87349V8.12651H3.94741C2.8742 8.12651 2 8.96517 2 10.0455C2 11.1258 2.8742 12 3.94741 12C5.02061 12 5.89481 11.1258 5.89481 10.0455V9.09311H8.10519V10.0455C8.10519 11.1258 8.97939 12 10.0526 12C11.1258 12 12 11.1258 12 10.0455C12 8.96517 11.1258 8.12651 10.0526 8.12651H9.086V5.87349H10.0526C11.1258 5.87349 12 5.03483 12 3.95451C12 2.8742 11.1258 2 10.0526 2C8.97939 2 8.10519 2.8742 8.10519 3.95451V4.914H5.89481V3.95451C5.89481 2.8742 5.02061 2 3.94741 2C2.8742 2 2 2.8742 2 3.95451C2 5.03483 2.8742 5.87349 3.94741 5.87349H4.90689ZM3.95451 4.92111C3.42146 4.92111 2.98792 4.48756 2.98792 3.95451C2.98792 3.42146 3.42146 2.98792 3.94741 2.98792C4.47335 2.98792 4.90689 3.42146 4.90689 3.96162V4.92111H3.95451ZM10.0455 4.92111H9.086V3.96162C9.086 3.42146 9.52665 2.98792 10.0526 2.98792C10.5785 2.98792 11.0121 3.42146 11.0121 3.95451C11.0121 4.48756 10.5785 4.92111 10.0455 4.92111ZM5.89481 8.13362V5.86638H8.10519V8.13362H5.89481ZM3.95451 9.07178H4.90689V10.0384C4.90689 10.5714 4.47335 11.005 3.94741 11.005C3.42146 11.005 2.98792 10.5714 2.98792 10.0384C2.98792 9.50533 3.42146 9.07178 3.95451 9.07178ZM10.0455 9.07178C10.5785 9.07178 11.0121 9.50533 11.0121 10.0384C11.0121 10.5714 10.5785 11.005 10.0526 11.005C9.52665 11.005 9.086 10.5714 9.086 10.0384V9.07178H10.0455Z" fill="#111827" />
      </svg>
      </kbd>
      <kbd class="inline-flex items-center px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">
      <svg class="w-3.5 h-3.5" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M4.88259 2.5H2.56069C2.25066 2.5 2 2.73841 2 3.04305C2 3.34768 2.25066 3.57947 2.56069 3.57947H4.62533C4.79024 3.57947 4.90237 3.65232 4.97493 3.80464L8.10158 10.8377C8.30607 11.2947 8.62269 11.5 9.11082 11.5H11.4393C11.7493 11.5 12 11.255 12 10.957C12 10.6589 11.7493 10.4205 11.4393 10.4205H9.38786C9.19657 10.4205 9.08443 10.3477 9.01187 10.1954L5.89842 3.16887C5.71372 2.75166 5.34433 2.5 4.88259 2.5ZM11.4393 2.5H8.43799C8.12137 2.5 7.8839 2.73179 7.8839 3.03642C7.8839 3.34106 8.12137 3.57285 8.43799 3.57285H11.4393C11.7559 3.57285 12 3.34106 12 3.03642C12 2.73179 11.7559 2.5 11.4393 2.5Z" fill="#111827" />
      </svg>
      </kbd>
      <kbd class="inline-flex items-center px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">
      <svg class="w-3.5 h-3.5" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M2.1709 8.15625C2.06152 8.26562 2 8.40234 2 8.55957C2 8.8877 2.25293 9.13379 2.57422 9.13379C2.73828 9.13379 2.875 9.07227 2.98438 8.96973L6.53906 5.39453L10.0869 8.96973C10.1963 9.07227 10.3398 9.13379 10.4971 9.13379C10.8252 9.13379 11.0713 8.8877 11.0713 8.55957C11.0713 8.40234 11.0098 8.26562 10.9072 8.15625L6.95605 4.18457C6.84668 4.06152 6.69629 4 6.53906 4C6.375 4 6.23828 4.06152 6.11523 4.18457L2.1709 8.15625Z" fill="#111827" />
      </svg>
      </kbd>
      <kbd class="inline-flex items-center px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">
      <svg class="w-3.5 h-3.5" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M9.69539 9.93909C11.0114 9.93909 12 8.59898 12 6.50508V6.11675C12 3.48223 10.2966 1 7.14362 1H7.09018C4.18437 1 2 3.26904 2 6.8401V7.28934C2 11.0964 4.27121 13 7.0501 13H7.10354C8.19238 13 8.91383 12.8325 9.28791 12.6345V11.6675C8.80695 11.9036 8.13226 12.0558 7.11022 12.0558H7.05678C4.81897 12.0558 2.9352 10.4797 2.9352 7.24365V6.88579C2.9352 3.82487 4.74549 1.94416 7.09018 1.94416H7.14362C9.67535 1.94416 11.0848 3.93147 11.0848 6.14721V6.42132C11.0848 8.21827 10.4903 9.02538 9.82231 9.02538C9.35471 9.02538 9.00067 8.72081 9.00067 8.11167V4.39594H8.05878V5.25635H8.00534C7.8851 4.82995 7.4509 4.28934 6.68938 4.28934C5.52705 4.28934 4.88577 5.30964 4.88577 6.75635V7.44162C4.88577 8.9264 5.51369 9.93909 6.62926 9.93909C7.42418 9.93909 7.97862 9.36041 8.09218 8.88832H8.15898C8.24583 9.38325 8.73347 9.93909 9.69539 9.93909ZM5.86774 7.29695V6.81726C5.86774 5.70558 6.34202 5.19543 6.94322 5.19543C7.55778 5.19543 8.03874 5.73604 8.03874 6.74873V7.35787C8.03874 8.5 7.5845 8.96447 6.95658 8.96447C6.3153 8.96447 5.86774 8.48477 5.86774 7.29695Z" fill="#111827" />
      </svg>
      </kbd>
      <kbd class="inline-flex items-center px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">
      <svg class="w-3.5 h-3.5" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.8136 5.74359L11 4.77656H9.42623L9.95772 2H9.01208L8.48059 4.77656H6.28559L6.82399 2H5.85764L5.33305 4.77656H3.85591L3.67645 5.74359H5.14668L4.68421 8.1685H3.19327L3 9.15018H4.47714L3.93874 12H4.89129L5.44349 9.15018H7.63158L7.08628 12H8.03883L8.57722 9.15018H10.1372L10.3236 8.1685H8.76359L9.23986 5.74359H10.8136ZM6.09232 5.72894H8.30802L7.82485 8.19048H5.60915L6.09232 5.72894Z" fill="#111827" />
      </svg>
      </kbd>

Number keys

This is how one can display Number keys inside the KBD component.

0 1 2 3 4 5 6 7 8 9 
<kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">0</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">1</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">2</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">3</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">4</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">5</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">6</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">7</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">8</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200 rounded-lg">9</kbd>

Letter keys

Whenever letters need to be displayed the following example of tailwind css kbd can be used.

Q W E R T Y U I O P A S D F G H J K L Z X C B N M 
<kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">Q</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">W</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">E</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">R</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">T</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">Y</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">U</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">I</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">O</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">P</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">A</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">S</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">D</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">F</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">G</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">H</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">J</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">K</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">L</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">Z</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">X</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">C</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">B</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">N</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg ">M</kbd>

Function keys

In case you need to show function keys inside the KBD tailwind component; following example can be used.

F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 
<kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg">F1</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg">F2</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg">F3</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg">F4</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg">F5</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg">F6</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg">F7</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg">F8</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg">F9</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg">F10</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg">F11</kbd>
      <kbd class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white border border-gray-200  rounded-lg">F12</kbd>