Display15
Form1
Playground3
Macbook Keyboard
A MacBook Keyboard built using Tailwind CSS
Default
MacBook Keyboard
esc
esc
☀F1
F1
☀F2
F2
⌘F3
F3
🔍F4
F4
🎤F5
F5
☾F6
F6
◀◀F7
F7
▶F8
F8
▶▶F9
F9
🔇F10
F10
🔉F11
F11
🔊F12
F12
Touch ID
±§
§
!1
1
@2
2
£3
3
$4
4
%5
5
^6
6
&7
7
*8
8
(9
9
)0
0
_-
-
+=
=
⌫
⌫
⇥
⇥
Q
Q
W
W
E
E
R
R
T
T
Y
Y
U
U
I
I
O
O
P
P
{[
[
}]
]
|\
\
⇪
⇪
A
A
S
S
D
D
F
F
G
G
H
H
J
J
K
K
L
L
:;
;
"'
'
↵
↵
⇧
⇧
~`
`
Z
Z
X
X
C
C
V
V
B
B
N
N
M
M
<,
,
>.
.
?/
/
⇧
⇧
fn🌐
🌐
⌃control
control
⌥option
option
⌘command
command
⌘command
command
⌥option
option
▲
▲
◀
◀
▼
▼
▶
▶
macbook-keyboard-default-example.tsx
1<MacBookKeyboard2 keyColor="bg-gray-900"3 textColor="text-gray-200"4 glowColor="rgba(102, 187, 255, 0.7)"5 buttonBgColor=""6/>
Controls
keyColor
textColor
glowColor
buttonBgColor
CSS Colours
Using direct CSS color values for more flexibility
esc
esc
☀F1
F1
☀F2
F2
⌘F3
F3
🔍F4
F4
🎤F5
F5
☾F6
F6
◀◀F7
F7
▶F8
F8
▶▶F9
F9
🔇F10
F10
🔉F11
F11
🔊F12
F12
Touch ID
±§
§
!1
1
@2
2
£3
3
$4
4
%5
5
^6
6
&7
7
*8
8
(9
9
)0
0
_-
-
+=
=
⌫
⌫
⇥
⇥
Q
Q
W
W
E
E
R
R
T
T
Y
Y
U
U
I
I
O
O
P
P
{[
[
}]
]
|\
\
⇪
⇪
A
A
S
S
D
D
F
F
G
G
H
H
J
J
K
K
L
L
:;
;
"'
'
↵
↵
⇧
⇧
~`
`
Z
Z
X
X
C
C
V
V
B
B
N
N
M
M
<,
,
>.
.
?/
/
⇧
⇧
fn🌐
🌐
⌃control
control
⌥option
option
⌘command
command
⌘command
command
⌥option
option
▲
▲
◀
◀
▼
▼
▶
▶
macbook-keyboard-css-colours-example.tsx
1<MacBookKeyboard2 keyColor="#4a6274"3 buttonBgColor="#f9ddd2"4 textColor="#000000"5 glowColor="rgba(129, 140, 248, 0.7)"6/>
Controls
keyColor
buttonBgColor
textColor
glowColor
Raw HTML Colours
Using raw HTML color values
esc
esc
☀F1
F1
☀F2
F2
⌘F3
F3
🔍F4
F4
🎤F5
F5
☾F6
F6
◀◀F7
F7
▶F8
F8
▶▶F9
F9
🔇F10
F10
🔉F11
F11
🔊F12
F12
Touch ID
±§
§
!1
1
@2
2
£3
3
$4
4
%5
5
^6
6
&7
7
*8
8
(9
9
)0
0
_-
-
+=
=
⌫
⌫
⇥
⇥
Q
Q
W
W
E
E
R
R
T
T
Y
Y
U
U
I
I
O
O
P
P
{[
[
}]
]
|\
\
⇪
⇪
A
A
S
S
D
D
F
F
G
G
H
H
J
J
K
K
L
L
:;
;
"'
'
↵
↵
⇧
⇧
~`
`
Z
Z
X
X
C
C
V
V
B
B
N
N
M
M
<,
,
>.
.
?/
/
⇧
⇧
fn🌐
🌐
⌃control
control
⌥option
option
⌘command
command
⌘command
command
⌥option
option
▲
▲
◀
◀
▼
▼
▶
▶
macbook-keyboard-raw-html-colours-example.tsx
1<MacBookKeyboard2 keyColor="white"3 buttonBgColor="green"4 textColor="white"5 glowColor="rgba(124, 58, 237, 0.7)"6/>
Controls
keyColor
buttonBgColor
textColor
glowColor
Props
| Name | Type | Default | Description |
|---|---|---|---|
| keyColor | string | bg-gray-900 | Tailwind class or CSS color value for the keys |
| textColor | string | text-gray-200 | Tailwind class or CSS color value for the text |
| glowColor | string | rgba(102, 187, 255, 0.7) | Tailwind class or CSS color value for the glow |
| buttonBgColor | string | None | Tailwind class or CSS color value for the buttons |
| className | string | Additional classes for the card. |