MacBook Keyboard
An interactive, minimalist MacBook-inspired keyboard component for seamless user engagement.
esc
F1
F2
F3
F4
F5
F6
F7
F8
F8
F10
F11
F12
~`
!1
@2
#3
$4
%5
^6
&7
*8
(9
)0
—_
+ =
delete
tab
Q
W
E
R
T
Y
U
I
O
P
{[
}]
|\
caps lock
A
S
D
F
G
H
J
K
L
:;
"'
return
shift
Z
X
C
V
B
N
M
<,
>.
?/
shift
fn
control
option
command
command
option
Installation
- 1
Copy the source code
@/components/ui/macbook-keyboard.tsximport React from 'react' const MacBookKeyboard = () => { return ( <div> <div className="flex flex-row items-center justify-center gap-10 max-w-[88rem] mx-auto w-full"> <div className="absolute md:relative rounded-md bg-zinc-800 p-1 translate-y-14 scale-[0.9] sm:scale-[1.5] md:scale-[1.7] w-fit h-fit mx-auto"> <div className="flex gap-[2px] mb-[2px] w-full flex-shrink-0"> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 bg-[#0A090D] rounded-[3.5px] flex w-10 items-end justify-start pl-[4px] pb-[2px]" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center flex-col items-start text-white"> esc </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /> <path d="M12 5l0 .01" /> <path d="M17 7l0 .01" /> <path d="M19 12l0 .01" /> <path d="M17 17l0 .01" /> <path d="M12 19l0 .01" /> <path d="M7 17l0 .01" /> <path d="M5 12l0 .01" /> <path d="M7 7l0 .01" /> </svg> <span className="inline-block mt-1">F1</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /> <path d="M12 5l0 -2" /> <path d="M17 7l1.4 -1.4" /> <path d="M19 12l2 0" /> <path d="M17 17l1.4 1.4" /> <path d="M12 19l0 2" /> <path d="M7 17l-1.4 1.4" /> <path d="M6 12l-2 0" /> <path d="M7 7l-1.4 -1.4" /> </svg> <span className="inline-block mt-1">F2</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" /> <path d="M3 10h18" /> <path d="M10 3v18" /> </svg> <span className="inline-block mt-1">F3</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /> <path d="M21 21l-6 -6" /> </svg> <span className="inline-block mt-1">F4</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M9 2m0 3a3 3 0 0 1 3 -3h0a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3h0a3 3 0 0 1 -3 -3z" /> <path d="M5 10a7 7 0 0 0 14 0" /> <path d="M8 21l8 0" /> <path d="M12 17l0 4" /> </svg> <span className="inline-block mt-1">F5</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /> </svg> <span className="inline-block mt-1">F6</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M21 5v14l-8 -7z" /> <path d="M10 5v14l-8 -7z" /> </svg> <span className="inline-block mt-1">F7</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M4 5v14l12 -7z" /> <path d="M20 5l0 14" /> </svg> <span className="inline-block mt-1">F8</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M3 5v14l8 -7z" /> <path d="M14 5v14l8 -7z" /> </svg> <span className="inline-block mt-1">F8</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a.8 .8 0 0 1 1.5 .5v14a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5" /> <path d="M16 10l4 4m0 -4l-4 4" /> </svg> <span className="inline-block mt-1">F10</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M15 8a5 5 0 0 1 0 8" /> <path d="M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a.8 .8 0 0 1 1.5 .5v14a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5" /> </svg> <span className="inline-block mt-1">F11</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M15 8a5 5 0 0 1 0 8" /> <path d="M17.7 5a9 9 0 0 1 0 14" /> <path d="M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a.8 .8 0 0 1 1.5 .5v14a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5" /> </svg> <span className="inline-block mt-1">F12</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <div className="h-4 w-4 rounded-full bg-gradient-to-b from-20% from-neutral-900 via-black via-50% to-neutral-900 to-95% p-px"> <div className="bg-black h-full w-full rounded-full" /> </div> </div> </div> </div> </div> <div className="flex gap-[2px] mb-[2px] w-full flex-shrink-0"> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">~</span> <span className="block mt-1">`</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block ">!</span> <span className="block">1</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">@</span> <span className="block">2</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">#</span> <span className="block">3</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">$</span> <span className="block">4</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">%</span> <span className="block">5</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">^</span> <span className="block">6</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">&</span> <span className="block">7</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">*</span> <span className="block">8</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">(</span> <span className="block">9</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">)</span> <span className="block">0</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">—</span> <span className="block">_</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">+</span> <span className="block"> = </span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 bg-[#0A090D] rounded-[3.5px] flex w-10 items-end justify-end pr-[4px] pb-[2px]" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center flex-col items-end text-white"> delete </div> </div> </div> </div> <div className="flex gap-[2px] mb-[2px] w-full flex-shrink-0"> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 bg-[#0A090D] rounded-[3.5px] flex w-10 items-end justify-start pl-[4px] pb-[2px]" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center flex-col items-start text-white"> tab </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">Q</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">W</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">E</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">R</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">T</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">Y</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">U</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">I</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">O</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">P</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">{"{"}</span> <span className="block">[</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">{"}"}</span> <span className="block">]</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">|</span> <span className="block">\</span> </div> </div> </div> </div> <div className="flex gap-[2px] mb-[2px] w-full flex-shrink-0"> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 bg-[#0A090D] rounded-[3.5px] flex w-[2.8rem] items-end justify-start pl-[4px] pb-[2px]" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center flex-col items-start text-white"> caps lock </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">A</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">S</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">D</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">F</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">G</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">H</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">J</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">K</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">L</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">:</span> <span className="block">;</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">"</span> <span className="block">'</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 bg-[#0A090D] rounded-[3.5px] flex w-[2.85rem] items-end justify-end pr-[4px] pb-[2px]" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center flex-col items-end text-white"> return </div> </div> </div> </div> <div className="flex gap-[2px] mb-[2px] w-full flex-shrink-0"> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 bg-[#0A090D] rounded-[3.5px] flex w-[3.65rem] items-end justify-start pl-[4px] pb-[2px]" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center flex-col items-start text-white"> shift </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">Z</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">X</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">C</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">V</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">B</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">N</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">M</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block"><</span> <span className="block">,</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">></span> <span className="block">.</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <span className="block">?</span> <span className="block">/</span> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 bg-[#0A090D] rounded-[3.5px] flex w-[3.65rem] items-end justify-end pr-[4px] pb-[2px]" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center flex-col items-end text-white"> shift </div> </div> </div> </div> <div className="flex gap-[2px] mb-[2px] w-full flex-shrink-0"> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex items-center flex-col h-full justify-between py-[4px] text-white"> <div className="flex justify-end w-full pr-1"> <span className="block">fn</span> </div> <div className="flex justify-start w-full pl-1"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M3.6 9h16.8" /> <path d="M3.6 15h16.8" /> <path d="M11.5 3a17 17 0 0 0 0 18" /> <path d="M12.5 3a17 17 0 0 1 0 18" /> </svg> </div> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex items-center flex-col h-full justify-between py-[4px] text-white"> <div className="flex justify-end w-full pr-1"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M6 15l6 -6l6 6" /> </svg> </div> <div className="flex justify-start w-full pl-1"> <span className="block">control</span> </div> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex items-center flex-col h-full justify-between py-[4px] text-white"> <div className="flex justify-end w-full pr-1"> <svg fill="none" version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="h-[6px] w-[6px]" > <rect stroke="currentColor" strokeWidth={2} x={18} y={5} width={10} height={2} /> <polygon stroke="currentColor" strokeWidth={2} points="10.6,5 4,5 4,7 9.4,7 18.4,27 28,27 28,25 19.6,25 " /> <rect id="_Transparent_Rectangle_" className="st0" width={32} height={32} stroke="none" /> </svg> </div> <div className="flex justify-start w-full pl-1"> <span className="block">option</span> </div> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center w-8" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex items-center flex-col h-full justify-between py-[4px] text-white"> <div className="flex justify-end w-full pr-1"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M7 9a2 2 0 1 1 2 -2v10a2 2 0 1 1 -2 -2h10a2 2 0 1 1 -2 2v-10a2 2 0 1 1 2 2h-10" /> </svg> </div> <div className="flex justify-start w-full pl-1"> <span className="block">command</span> </div> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center w-[8.2rem]" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white" /> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center w-8" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex items-center flex-col h-full justify-between py-[4px] text-white"> <div className="flex justify-start w-full pl-1"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M7 9a2 2 0 1 1 2 -2v10a2 2 0 1 1 -2 -2h10a2 2 0 1 1 -2 2v-10a2 2 0 1 1 2 2h-10" /> </svg> </div> <div className="flex justify-start w-full pl-1"> <span className="block">command</span> </div> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="h-6 w-6 bg-[#0A090D] rounded-[3.5px] flex items-center justify-center" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex items-center flex-col h-full justify-between py-[4px] text-white"> <div className="flex justify-start w-full pl-1"> <svg fill="none" version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="h-[6px] w-[6px]" > <rect stroke="currentColor" strokeWidth={2} x={18} y={5} width={10} height={2} /> <polygon stroke="currentColor" strokeWidth={2} points="10.6,5 4,5 4,7 9.4,7 18.4,27 28,27 28,25 19.6,25 " /> <rect id="_Transparent_Rectangle_" className="st0" width={32} height={32} stroke="none" /> </svg> </div> <div className="flex justify-start w-full pl-1"> <span className="block">option</span> </div> </div> </div> </div> <div className="w-[4.9rem] mt-[2px] h-6 p-[0.5px] rounded-[4px] flex flex-col justify-end items-center"> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="bg-[#0A090D] rounded-[3.5px] flex items-center justify-center w-6 h-3" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M11.293 7.293a1 1 0 0 1 1.32 -.083l.094 .083l6 6l.083 .094l.054 .077l.054 .096l.017 .036l.027 .067l.032 .108l.01 .053l.01 .06l.004 .057l.002 .059l-.002 .059l-.005 .058l-.009 .06l-.01 .052l-.032 .108l-.027 .067l-.07 .132l-.065 .09l-.073 .081l-.094 .083l-.077 .054l-.096 .054l-.036 .017l-.067 .027l-.108 .032l-.053 .01l-.06 .01l-.057 .004l-.059 .002h-12c-.852 0 -1.297 -.986 -.783 -1.623l.076 -.084l6 -6z" fill="currentColor" strokeWidth={0} /> </svg> </div> </div> </div> <div className="flex"> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="bg-[#0A090D] rounded-[3.5px] flex items-center justify-center w-6 h-3" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M13.883 5.007l.058 -.005h.118l.058 .005l.06 .009l.052 .01l.108 .032l.067 .027l.132 .07l.09 .065l.081 .073l.083 .094l.054 .077l.054 .096l.017 .036l.027 .067l.032 .108l.01 .053l.01 .06l.004 .057l.002 .059v12c0 .852 -.986 1.297 -1.623 .783l-.084 -.076l-6 -6a1 1 0 0 1 -.083 -1.32l.083 -.094l6 -6l.094 -.083l.077 -.054l.096 -.054l.036 -.017l.067 -.027l.108 -.032l.053 -.01l.06 -.01z" fill="currentColor" strokeWidth={0} /> </svg> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="bg-[#0A090D] rounded-[3.5px] flex items-center justify-center w-6 h-3" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M18 9c.852 0 1.297 .986 .783 1.623l-.076 .084l-6 6a1 1 0 0 1 -1.32 .083l-.094 -.083l-6 -6l-.083 -.094l-.054 -.077l-.054 -.096l-.017 -.036l-.027 -.067l-.032 -.108l-.01 -.053l-.01 -.06l-.004 -.057v-.118l.005 -.058l.009 -.06l.01 -.052l.032 -.108l.027 -.067l.07 -.132l.065 -.09l.073 -.081l.094 -.083l.077 -.054l.096 -.054l.036 -.017l.067 -.027l.108 -.032l.053 -.01l.06 -.01l.057 -.004l12.059 -.002z" fill="currentColor" strokeWidth={0} /> </svg> </div> </div> </div> <div className="p-[0.5px] rounded-[4px] bg-white/[0.2] shadow-md shadow-white/50 hover:shadow-none hover:scale-[0.98] cursor-pointer transition duration-100"> <div className="bg-[#0A090D] rounded-[3.5px] flex items-center justify-center w-6 h-3" style={{ boxShadow: "rgb(13, 13, 15) 0px -0.5px 2px 0px inset, rgb(13, 13, 15) -0.5px 0px 2px 0px inset" }} > <div className="text-[5px] w-full flex justify-center items-center flex-col text-white"> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="h-[6px] w-[6px]" > <path d="M9 6c0 -.852 .986 -1.297 1.623 -.783l.084 .076l6 6a1 1 0 0 1 .083 1.32l-.083 .094l-6 6l-.094 .083l-.077 .054l-.096 .054l-.036 .017l-.067 .027l-.108 .032l-.053 .01l-.06 .01l-.057 .004l-.059 .002l-.059 -.002l-.058 -.005l-.06 -.009l-.052 -.01l-.108 -.032l-.067 -.027l-.132 -.07l-.09 -.065l-.081 -.073l-.083 -.094l-.054 -.077l-.054 -.096l-.017 -.036l-.027 -.067l-.032 -.108l-.01 -.053l-.01 -.06l-.004 -.057l-.002 -12.059z" fill="currentColor" strokeWidth={0} /> </svg> </div> </div> </div> </div> </div> </div> </div> </div> </div> ) } export default MacBookKeyboard