Let's Create a Browser Mockups with Tailwind CSS 
Tags: tailwindcss, css, design
Published: 2021-01-01 21:48:49

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.
```html
<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.
```html
<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:
```html
<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.
```html
<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.
```html
<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:
```html
<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.
```html
<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.
```html
<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>
```
And we're done.