Home
Coastal UI
Macbook Air 13" Mockup

Macbook Air 13" Mockup

A gorgeous component that can be used for landing pages, hero statements and more. Interested in our UI library? Check out the discord link in my bio.

This tailwind example is contributed by Coastal UI, on 13-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are simulation,copy,dummy,miniature,like

Hero Mockup

Author Coastal UI

1.6k

Fork Fullscreen

<div class="w-[608px] [perspective:2000px]">
    <div class="relative w-full h-[420px] [transform:rotateX(73deg)] [transform-style:preserve-3d] origin-bottom">
    <div class="absolute overflow-hidden aspect-video left-0 h-[342px] -top-[343px] bg-black border-[2px] border-[#404041] rounded-md [transform:rotateX(-70deg)] origin-bottom">
        <div class="absolute bottom-0 w-full left-0 bg-zinc-900 h-3 flex items-center justify-center text-zinc-200 text-[6px] font-thin">
            MacBook Air
        </div>
        <div class="absolute inset-1 mb-4 mx-1 mt-1 rounded-[3px] overflow-hidden">
            <div class="relative w-full h-full rounded-[37px] overflow-hidden flex items-center justify-center bg-slate-900/10">
                <svg class="text-slate-100 h-[66px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M17.05 20.28c-.98.95-2.05.8-3.08.35c-1.09-.46-2.09-.48-3.24 0c-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8c1.18-.24 2.31-.93 3.57-.84c1.51.12 2.65.72 3.4 1.8c-3.12 1.87-2.38 5.98.48 7.13c-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25c.29 2.58-2.34 4.5-3.74 4.25" />
                </svg>
                <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-12 w-48 bg-slate-500 blur-[80px]">
                </div>
            </div>
        </div>
        </div>
        <div class="w-[608px] h-[420px] bg-[#6F7072] rounded-[16px] border-b border-zinc-800 flex flex-col pb-3 items-start overflow-hidden">
            <div class="absolute inset-0 mt-3 bg-[#646464] w-full h-full -z-10 rounded-[28px]"></div>
            <div class="absolute bottom-[8px] left-[241px] h-[8px] bg-zinc-700/50 w-[126px] rounded-t-full -mb-4 [transform:rotateX(210deg)]">
            </div>
            <div class="h-[6.94%] w-full relative">
                <div class="absolute top-0 left-1/2 -translate-x-1/2 h-2 w-[75%] flex items-center">
                    <div class="w-[10%] bg-gradient-to-b from-black via-neutral-700 to-black h-full rounded-bl-sm"></div>
                    <div class="flex-grow bg-gradient-to-b from-black via-black to-zinc-700 h-full"></div>
                    <div class="w-[10%] bg-gradient-to-b from-black via-neutral-700 to-black h-full rounded-br-sm"></div>
                </div>
            </div>
            <div class="h-[50.42%] w-full relative flex">
                <div 
                class="my-[6px] w-[4.07%] mx-[2px]" 
                style="background-image: url('data:image/svg+xml,\
                    <svg xmlns=\'http://www.w3.org/2000/svg\' width=\'4\' height=\'4\' viewBox=\'0 0 4 4\'>\
                    <circle cx=\'2\' cy=\'2\' r=\'0.8\' fill=\'rgba(0, 0, 0, 0.2)\'/>\
                    </svg>');
                    background-repeat: repeat;
                    background-size: 3px 3px;"
                >
                </div>
                <div class="w-[91.86%] rounded-md border-neutral-600/60 border-opacity-70 border relative overflow-hidden flex flex-col p-[5px]">
                    <div class="absolute left-0 top-0 w-[2px] h-full bg-gradient-to-r from-neutral-600/20 via-neutral-800/10 to-transparent"></div>
                    <div class="absolute right-0 top-0 w-[2px] h-full bg-gradient-to-l from-neutral-600/20 via-neutral-800/10 to-transparent"></div>
                    <div class="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-t from-neutral-600/20 via-neutral-800/10 to-transparent"></div>
                    
                    
                    <div class="h-[10.03%] mb-[.6%] flex items-center gap-x-[3px] w-full">
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex items-center justify-center text-[8px] text-neutral-400">esc</div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex items-center justify-center text-[8px] text-neutral-400">F1</div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex items-center justify-center text-[8px] text-neutral-400">F2</div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex items-center justify-center text-[8px] text-neutral-400">F3</div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex items-center justify-center text-[8px] text-neutral-400">F4</div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex items-center justify-center text-[8px] text-neutral-400">F5</div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex items-center justify-center text-[8px] text-neutral-400">F6</div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex items-center justify-center text-[8px] text-neutral-400">F7</div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex items-center justify-center text-[8px] text-neutral-400">F8</div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex items-center justify-center text-[8px] text-neutral-400">F9</div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex items-center justify-center text-[8px] text-neutral-400">F10</div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex items-center justify-center text-[8px] text-neutral-400">F11</div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex items-center justify-center text-[8px] text-neutral-400">F12</div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] aspect-square h-full rounded-[4px]"></div>
                    </div>

<div class="h-[16.62%] mb-[.6%] flex items-center space-x-[2px] w-full">
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>~</div>
                            <div>`</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>!</div>
                            <div>1</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>@</div>
                            <div>2</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>#</div>
                            <div>3</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>$</div>
                            <div>4</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>%</div>
                            <div>5</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>^</div>
                            <div>6</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>&</div>
                            <div>7</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>*</div>
                            <div>8</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>(</div>
                            <div>9</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>)</div>
                            <div>0</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>_</div>
                            <div>-</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>+</div>
                            <div>=</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-[1.3] flex items-end justify-end p-1 text-[8px] text-neutral-400">
                            delete
                        </div>
                    </div>
                    
                    <div class="h-[16.62%] mb-[.6%] flex items-center space-x-[2px] w-full">
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-[1.31] flex items-end justify-start p-1 text-[8px] text-neutral-400">
                            tab
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>Q</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>W</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>E</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>R</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>T</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>Y</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>U</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>I</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>O</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>P</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>{</div>
                            <div>[</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>}</div>
                            <div>]</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>|</div>
                            <div>\</div>
                        </div>
                    </div>
                    
                    <div class="h-[16.62%] mb-[.6%] flex items-center space-x-[2px] w-full">
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-[1.5] flex items-end justify-start p-1 text-[8px] text-neutral-400">
                            caps lock
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>A</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>S</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>D</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>F</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>G</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>H</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>J</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>K</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div></div>
                            <div>L</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>:</div>
                            <div>;</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                            <div>"</div>
                            <div>'</div>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-[1.55] flex items-end justify-end p-1 text-[8px] text-neutral-400">
                            return
                        </div>
                    </div>
                    
                <div class="h-[16.62%] mb-[.5%] flex items-center space-x-[2px] w-full">
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[3px] flex-[2] flex items-end justify-start p-1 text-[8px] text-neutral-400">
                        shift
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                        <div></div>
                        <div>Z</div>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                        <div></div>
                        <div>X</div>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                        <div></div>
                        <div>C</div>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                        <div></div>
                        <div>V</div>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                        <div></div>
                        <div>B</div>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                        <div></div>
                        <div>N</div>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                        <div></div>
                        <div>M</div>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                        <div>&lt;</div>
                        <div>,</div>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                        <div>&gt;</div>
                        <div>.</div>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[4px] flex-1 flex flex-col items-center justify-center text-[8px] text-neutral-400">
                        <div>?</div>
                        <div>/</div>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full rounded-[3px] flex-[2] flex items-end justify-end p-1 text-[8px] text-neutral-400">
                        shift
                    </div>
                </div>
                
                <div class="h-[16.62%] flex items-end space-x-[2px] w-full">
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full flex-[1.2] rounded-[3px] flex flex-col items-center justify-center text-[8px] text-neutral-400 relative">
                        <div class="absolute top-1 right-[6px]">fn</div>
                        <div class="absolute bottom-1 left-1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24">
                                <path fill="currentColor" fill-rule="evenodd" d="M12 21.237a9.237 9.237 0 1 0 0-18.474a9.237 9.237 0 0 0 0 18.474m2.99-16.971c.36.387.685.838.97 1.335c.523.905.931 1.99 1.195 3.19q.623.156 1.166.348c.668.237 1.255.517 1.72.84a8.31 8.31 0 0 0-5.051-5.713m5.171 9.196c-.483.359-1.113.668-1.84.925q-.498.176-1.066.322c-.254 1.4-.7 2.66-1.294 3.69a7.4 7.4 0 0 1-.971 1.335a8.3 8.3 0 0 0 5.171-6.272m-11.15 6.272a7.4 7.4 0 0 1-.972-1.335c-.593-1.03-1.04-2.29-1.294-3.69a13 13 0 0 1-1.066-.322c-.727-.257-1.357-.566-1.84-.925a8.3 8.3 0 0 0 5.171 6.272M3.958 9.978c.465-.322 1.052-.602 1.72-.839q.543-.191 1.166-.348c.264-1.2.672-2.285 1.194-3.19a7.4 7.4 0 0 1 .971-1.335A8.31 8.31 0 0 0 3.96 9.978m11.18-3.905c.409.71.746 1.554.989 2.496a22.5 22.5 0 0 0-3.655-.354v-4.41c.978.19 1.918.97 2.666 2.268m1.204 3.504a21 21 0 0 0-3.87-.415v5.202c1.447-.028 2.792-.183 3.945-.43q.127-.932.128-1.934c0-.845-.071-1.658-.203-2.423m-4.818-5.773v4.41a22.5 22.5 0 0 0-3.654.355c.242-.942.58-1.787.988-2.496c.748-1.297 1.688-2.078 2.666-2.269m0 5.358a21 21 0 0 0-3.87.415A14.3 14.3 0 0 0 7.453 12c0 .667.044 1.314.128 1.933c1.153.248 2.498.403 3.945.43zm-5.531.87q.315-.11.663-.21a15.5 15.5 0 0 0-.062 3.865q-.315-.093-.601-.193c-.76-.269-1.34-.577-1.722-.896c-.385-.321-.515-.605-.515-.835s.13-.514.515-.835c.382-.319.962-.627 1.722-.895m2.865 7.895c-.479-.832-.86-1.85-1.105-2.992c1.138.219 2.418.351 3.771.376v4.885c-.978-.191-1.918-.972-2.666-2.27m3.614 2.269V15.31a22.4 22.4 0 0 0 3.771-.376c-.244 1.143-.626 2.16-1.105 2.992c-.748 1.297-1.688 2.078-2.666 2.269M17.494 12q0 .864-.09 1.687q.315-.092.601-.193c.76-.269 1.34-.577 1.722-.896c.385-.321.515-.605.515-.835s-.13-.514-.515-.835c-.382-.319-.962-.627-1.722-.895q-.315-.111-.663-.211c.1.7.153 1.429.153 2.178" clip-rule="evenodd" />
                            </svg>
                        </div>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full flex-[1] rounded-[3px] relative flex items-end justify-center p-1 text-[8px] text-neutral-400">
                        <div class="absolute top-1 right-1">⌃</div>
                        <div>control</div>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full flex-[1] rounded-[3px] relative flex items-end justify-center p-1 text-[8px] text-neutral-400">
                        <div class="absolute top-[1px] right-1">⌥</div>
                        <div>option</div>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full flex-[.8] rounded-[3px] relative flex items-end justify-center p-1 text-[8px] text-neutral-400">
                        <div class="absolute top-[1px] right-1">⌘</div>
                        <div>command</div>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full flex-[7] rounded-[3px]">
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full flex-[1] rounded-[3px] relative flex items-end p-1 text-[8px] text-neutral-400">
                        <div class="absolute top-[1px] left-1">⌘</div>
                        <div>command</div>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full flex-[.8] rounded-[3px] relative flex items-end justify-center p-1 text-[8px] text-neutral-400">
                        <div class="absolute top-[1px] left-1">⌥</div>
                        <div>option</div>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-1/2 flex-[1.4] rounded-[3px] flex items-center justify-center text-[8px] text-neutral-400">
                        <svg class="rotate-180" width="8" height="5" viewBox="0 0 8 8">
                            <polygon points="8,4 4,0 4,8" fill="currentColor"/>
                        </svg>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-full flex-[1.4] rounded-[3px] flex flex-col gap-[1px]">
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] flex-1 rounded-t-[3px] flex items-center justify-center text-[8px] text-neutral-400">
                            <svg width="8" height="5" viewBox="0 0 8 8">
                                <polygon points="4,0 0,4 8,4" fill="currentColor"/>
                            </svg>
                        </div>
                        <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] flex-1 rounded-b-[3px] flex items-center justify-center text-[8px] text-neutral-400">
                            <svg width="8" height="5" viewBox="0 0 8 8">
                                <polygon points="4,8 0,4 8,4" fill="currentColor"/>
                            </svg>
                        </div>
                    </div>
                    <div class="bg-gradient-to-t from-black via-black to-zinc-900 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_2px_0_rgba(0,0,0,0.3)] h-1/2 flex-[1.4] rounded-[3px] flex items-center justify-center text-[8px] text-neutral-400">
                        <svg class="rotate-180" width="8" height="5" viewBox="0 0 8 8">
                            <polygon points="0,4 4,0 4,8" fill="currentColor"/>
                        </svg>
                    </div>
                </div>
                </div>
                <div 
                class="my-[6px] w-[4.07%] mx-[2px]" 
                style="background-image: url('data:image/svg+xml,\
                    <svg xmlns=\'http://www.w3.org/2000/svg\' width=\'4\' height=\'4\' viewBox=\'0 0 4 4\'>\
                    <circle cx=\'2\' cy=\'2\' r=\'0.8\' fill=\'rgba(0, 0, 0, 0.2)\'/>\
                    </svg>');
                    background-repeat: repeat;
                    background-size: 3px 3px;"
                >
                </div>
            </div>
            <div class="h-[42.64%] w-full relative flex flex-col items-center">
                <div class="w-[40.41%] h-[91.56%] rounded-md border-neutral-600/60 border-opacity-70 border border-b-2 border- my-auto">
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Author:
Coastal UI

8 months ago

1.4k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

4 months ago

1.1k
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

Author:
ABDO-SY

4 months ago

1.3k
Safari browser mockup

Author:
Leon Bachmann

2 years ago

7.6k
Hero section with button

Author:
Samuel Dawson

2 years ago

11.8k
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

2 months ago

318
Typical SAAS hero section

Author:
Eamon Carter

1 year ago

8.7k
App Hero Section With header

Author:
Abdul Baset Bappy

3 days ago

15
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

2 months ago

152
Modern SAAS HERO Section
A hero section for your SAAS application

Author:
Emdadul Islam

1 year ago

2k
iPhone 15 Mockup
The "Screen Content" div can be manipulated to have anything inside the screen.

Author:
Coastal UI

7 months ago

1.1k
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

Author:
Hezron Okoko

9 months ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components