Let's Create a Browser Mockups with Tailwind CSS

#tailwindcss #css #design

Alright, We need to think what we need in this case ? Like I know we need header, and body, and inside the header we need three dots which is red, yellow and green.

Let's create the container for header.

<div class="w-full h-11 rounded-t-lg border-2 border-black flex justify-start items-center space-x-1.5 px-3">
    <!-- The dots will be here -->
</div>

Next, inside our header, we need to make a dot.

<span class="w-3 h-3 rounded-full bg-black"></span>

And because our header has been set into flex justify-start, now you can put 3 of span inside the header like so:

<div class="w-full h-11 rounded-t-lg border-2 border-black flex justify-start items-center space-x-1.5 px-3">
    <span class="w-3 h-3 rounded-full bg-black"></span>
    <span class="w-3 h-3 rounded-full bg-black"></span>
    <span class="w-3 h-3 rounded-full bg-black"></span>
</div>

You may think this is not what we want, so please change the dot background one by one.

<div class="w-full h-11 rounded-t-lg border-2 border-black flex justify-start items-center space-x-1.5 px-3">
    <span class="w-3 h-3 rounded-full bg-red-400"></span>
    <span class="w-3 h-3 rounded-full bg-yellow-400"></span>
    <span class="w-3 h-3 rounded-full bg-green-400"></span>
</div>

Next, let's make a body for our muckup, of course you can change the height what ever you want, in this example, we will use the bult-in class of max spacing (24rem) from tailwind it self.

<div class="border-2 border-black border-t-0 w-full h-96"></div>

And now we can merge them in one container like so:

<div  class="max-w-3xl mx-auto my-10">
    <div  class="w-full h-11 rounded-t-lg bg-gray-200 flex justify-start items-center space-x-1.5 px-3">
        <span  class="w-3 h-3 rounded-full bg-red-400"></span>
        <span  class="w-3 h-3 rounded-full bg-yellow-400"></span>
        <span  class="w-3 h-3 rounded-full bg-green-400"></span>
    </div>
    <div  class="bg-gray-100 border-t-0 w-full h-96"></div>
</div>

And now you have a gray mockup browser. But let's make the others like the dark mode and the outline of dots.

<div class="max-w-3xl mx-auto my-10">
    <div class="w-full h-11 rounded-t-lg bg-gray-900 flex justify-start items-center space-x-1.5 px-3">
        <span class="w-3 h-3 rounded-full bg-red-400"></span>
        <span class="w-3 h-3 rounded-full bg-yellow-400"></span>
        <span class="w-3 h-3 rounded-full bg-green-400"></span>
    </div>
    <div class="bg-gray-700 border-t-0 w-full h-96"></div>
</div>

And the last one is outline of dots.

<div class="max-w-3xl mx-auto my-10">
    <div class="w-full h-11 relative rounded-t-lg bg-blue-900 flex overflow-hidden justify-start items-center space-x-1.5 px-2">
        <div class="absolute w-full h-full inset-0 bg-black opacity-50"></div>
        <span class="relative w-3 h-3 border-2 rounded-full border-red-400"></span>
        <span class="relative w-3 h-3 border-2 rounded-full border-yellow-400"></span>
        <span class="relative w-3 h-3 border-2 rounded-full border-green-400"></span>
    </div>
    <div class="relative bg-blue-600 border-t-0 w-full h-96 border-t border-blue-900">
        <div class="absolute w-full h-full inset-0 bg-black opacity-60"></div>
    </div>
</div>