Components
Tailwind CSS KBD (Keyboard) Components - Madhuranjan UI
Explore a collection of stylish and functional keyboard components built with Tailwind CSS. These keys are fully responsive, support both light and dark themes, and offer a sleek UI for various applications.
All Keyboard Keys
A complete set of keyboard keys, including letters, numbers, function keys, and special keys. These components follow a uniform design system ensuring responsiveness and clarity across different devices.
EscF1F2F3F4F5F6F7F8F9F10F11F12~1234567890-=BackspaceTabQWERTYUIOP[]\CapsASDFGHJKL;'EnterShiftZXCVBNM,./ShiftCtrlWinAltSpaceAltFnMenuCtrl
1 <div class="mx-auto flex flex-wrap items-center justify-center gap-2 p-4 bg-violet-100 text-gray-800 transition-colors duration-75 dark:bg-gray-900 dark:text-gray-100">
2 {/* <!-- Row 1 --> */}
3 <kbd class="flex h-10 w-10 items-center justify-center rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-800 shadow transition-colors duration-75 hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700">
4 Esc
5 </kbd>
6 <kbd class="flex h-10 w-10 items-center justify-center rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-800 shadow transition-colors duration-75 hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700">
7 F1
8 </kbd>
9 <kbd class="flex h-10 w-10 items-center justify-center rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-800 shadow transition-colors duration-75 hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700">
10 F2List Group Keyboard UI
A structured group of keys that visually categorize different keyboard elements. Useful for layouts requiring clear separation between key clusters.
Basic Formatting
Bold
Ctrl+B
Italic
Ctrl+I
Underline
Ctrl+U
Strikethrough
Ctrl+Alt+U
Superscript
Ctrl+.
Subscript
Ctrl+,
Text Alignment
Left
Ctrl+Shift+L
Center
Ctrl+Shift+E
Right
Ctrl+Shift+R
Justify
Ctrl+Shift+J
Insert & Tools
Insert Link
Ctrl+K
Insert Image
Ctrl+Shift+M
Find
Ctrl+F
Replace
Ctrl+H
Navigation
Go to Start of Document
Ctrl+Home
Go to End of Document
Ctrl+End
Go to Next Word
Ctrl+→
Go to Previous Word
Ctrl+←
1<div class="bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center p-4">
2 <!-- Inner container -->
3 <div class="w-full max-w-2xl rounded-lg shadow bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 overflow-hidden">
4
5 <!-- Basic Formatting -->
6 <div class="bg-gray-200 dark:bg-gray-700 px-4 py-2 text-xs uppercase tracking-wider font-semibold text-gray-600 dark:text-gray-300">
7 Basic Formatting
8 </div>
9
10 <!-- Bold -->Functional Keyboard Keys (F1 - F12)
Function keys provide quick access to common shortcuts and system commands. These keys are styled to match real keyboard aesthetics and are fully adaptive to dark/light themes.
F1F2F3F4F5F6F7F8F9F10F11F12
1<div class="flex flex-wrap items-center justify-center gap-2 rounded-xl border border-gray-300 bg-white p-4 shadow-lg transition-colors dark:border-gray-700 dark:bg-gray-900">
2 <kbd class="rounded-lg border border-gray-400 bg-gray-200 px-4 py-2 text-gray-900 shadow-md dark:border-gray-600 dark:bg-gray-700 dark:text-white">F1</kbd>
3 <kbd class="rounded-lg border border-gray-400 bg-gray-200 px-4 py-2 text-gray-900 shadow-md dark:border-gray-600 dark:bg-gray-700 dark:text-white">F2</kbd>
4 <kbd class="rounded-lg border border-gray-400 bg-gray-200 px-4 py-2 text-gray-900 shadow-md dark:border-gray-600 dark:bg-gray-700 dark:text-white">F3</kbd>
5 <kbd class="rounded-lg border border-gray-400 bg-gray-200 px-4 py-2 text-gray-900 shadow-md dark:border-gray-600 dark:bg-gray-700 dark:text-white">F4</kbd>
6 <kbd class="rounded-lg border border-gray-400 bg-gray-200 px-4 py-2 text-gray-900 shadow-md dark:border-gray-600 dark:bg-gray-700 dark:text-white">F5</kbd>
7 <kbd class="rounded-lg border border-gray-400 bg-gray-200 px-4 py-2 text-gray-900 shadow-md dark:border-gray-600 dark:bg-gray-700 dark:text-white">F6</kbd>
8 <kbd class="rounded-lg border border-gray-400 bg-gray-200 px-4 py-2 text-gray-900 shadow-md dark:border-gray-600 dark:bg-gray-700 dark:text-white">F7</kbd>
9 <kbd class="rounded-lg border border-gray-400 bg-gray-200 px-4 py-2 text-gray-900 shadow-md dark:border-gray-600 dark:bg-gray-700 dark:text-white">F8</kbd>
10 <kbd class="rounded-lg border border-gray-400 bg-gray-200 px-4 py-2 text-gray-900 shadow-md dark:border-gray-600 dark:bg-gray-700 dark:text-white">F9</kbd>Alphabet Keyboard Keys (A - Z)
This section includes all alphabetical keys, styled for clarity and usability. Perfect for integrating custom keyboard layouts in applications or interfaces.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1 <div class="flex flex-wrap justify-center gap-2 p-4 bg-white dark:bg-gray-800 shadow-lg border border-gray-300 dark:border-gray-700 items-center transition-colors">
2 <kbd class="px-4 py-2 text-gray-900 dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md border border-gray-400 dark:border-gray-600">A</kbd>
3 <kbd class="px-4 py-2 text-gray-900 dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md border border-gray-400 dark:border-gray-600">B</kbd>
4 <kbd class="px-4 py-2 text-gray-900 dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md border border-gray-400 dark:border-gray-600">C</kbd>
5 <kbd class="px-4 py-2 text-gray-900 dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md border border-gray-400 dark:border-gray-600">D</kbd>
6 <kbd class="px-4 py-2 text-gray-900 dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md border border-gray-400 dark:border-gray-600">E</kbd>
7 <kbd class="px-4 py-2 text-gray-900 dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md border border-gray-400 dark:border-gray-600">F</kbd>
8 <kbd class="px-4 py-2 text-gray-900 dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md border border-gray-400 dark:border-gray-600">G</kbd>
9 <kbd class="px-4 py-2 text-gray-900 dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md border border-gray-400 dark:border-gray-600">H</kbd>
10 <kbd class="px-4 py-2 text-gray-900 dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md border border-gray-400 dark:border-gray-600">I</kbd>Arrow Keys (Small, Medium, Large)
Arrow keys in three different sizes (Small, Medium, Large) allow for flexibility in UI/UX applications. Each key follows a consistent design language, ensuring responsiveness and visual clarity.
↑
←↓→
↑
←↓→
↑
←↓→
1<div class="flex flex-row gap-10 justify-center items-center bg-gray-100 dark:bg-gray-900 transition-colors p-6 space-y-6">
2
3
4 <div class="flex flex-col items-center space-y-1">
5 <kbd class="px-3 py-1 text-xs text-gray-900 dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md border border-gray-400 dark:border-gray-600">↑</kbd>
6 <div class="flex space-x-1">
7 <kbd class="px-3 py-1 text-xs text-gray-900 dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md border border-gray-400 dark:border-gray-600">←</kbd>
8 <kbd class="px-3 py-1 text-xs text-gray-900 dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md border border-gray-400 dark:border-gray-600">↓</kbd>
9 <kbd class="px-3 py-1 text-xs text-gray-900 dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md border border-gray-400 dark:border-gray-600">→</kbd>
10 </div>