Mockup Browser Dengan Tailwind CSS / Parsinta

Selain Anda bisa membuat mockup browser dengan berbagai aplikasi seperti Figma, Sketch, bahkan Photoshop. Dengan Tailwind CSS pun bisa membuat mockup dengan sangat mudah.

Disini kita akan bermain dengan markup biasa saja, dan kita tidak juga akan menginstall tailwind css nya melainkan kita hanya akan menggunakan cdn saja.

Pertama, mari kita buat boilerplate nya seperti:

1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8" />
5        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6        <script src="https://cdn.tailwindcss.com"></script>
7    </head>
8    <body>
9        <!-- Start -->
10    </body>
11</html>
12
htmlCopy

Dalam artikel ini kita akan membuat 3 model mockup browser, seperti dark, light dan juga blinding. Yang pertama, mari kita buat dulu layout untuk fokus ketengah-tengah halaman browser kita seperti:

1<div class="flex items-center justify-center min-h-screen">
2    <div class="max-w-2xl mx-auto w-full">
3        <!-- Mockup -->
4    </div>
5</div>
6
htmlCopy

Setelah itu, di dalam nya mari kita buat langsung kerangka mockup nya seperti:

1<div class="border-2 border-black rounded-xl overflow-hidden">
2    <div class="w-full h-11 border-b-2 border-black flex justify-start items-center space-x-1.5 px-3">
3      	<!-- dots -->
4        <span class="w-3 h-3 rounded-full bg-black"></span>
5        <span class="w-3 h-3 rounded-full bg-black"></span>
6        <span class="w-3 h-3 rounded-full bg-black"></span>
7    </div>
8    <div class="w-full h-96">
9        <!-- Content goes here. -->
10    </div>
11</div>
12
htmlCopy

Kurang lebih jika Anda lihat di browser, maka tampilannya kurang lebih akan seperti ini:

Kemudian mari modifikasi warnanya satu persatu. Untuk border yang berwarna hitam, mari kita ganti menjadi grey light, kemudian beri warna background untuk top bar nya seperti:

1<div class="border-2 border-gray-300 rounded-xl overflow-hidden">
2    <div
3        class="w-full h-11 border-b-2 border-gray-300 bg-gray-50 flex justify-start items-center space-x-1.5 px-3"
4    >
5        <span class="w-3 h-3 rounded-full bg-rose-400"></span>
6        <span class="w-3 h-3 rounded-full bg-yellow-400"></span>
7        <span class="w-3 h-3 rounded-full bg-green-400"></span>
8    </div>
9    <div class="w-full h-96"><!-- ... --></div>
10</div>
11
htmlCopy

Maka harusnya, tampilan akan berubah menjadi seperti gambar di bawah.

Secara tidak langsung, Anda sudah mempunyai mockup browser. Kemudian, mari kita setup untuk tampilan yang gelap.

1<div class="border-2 border-gray-900 bg-gray-800 rounded-xl overflow-hidden">
2    <div
3        class="w-full h-11 border-b border-gray-700 bg-gray-900 flex justify-start items-center space-x-1.5 px-3"
4    >
5        <span class="w-3 h-3 rounded-full bg-rose-400"></span>
6        <span class="w-3 h-3 rounded-full bg-yellow-400"></span>
7        <span class="w-3 h-3 rounded-full bg-green-400"></span>
8    </div>
9    <div class="w-full h-96">
10        <!-- Content goes here. -->
11    </div>
12</div>
13
htmlCopy

Perhatikan, untuk tampilan yang gelap ini. Ukuran bordernya di ganti menjadi 1px dari 2px. Maka sekarang tampilannya akan seperti ini:

Semoga artikel ini bermanfaat ya, until next time 👋🏻

Mockup Browser Dengan Tailwind CSS

Share

Irsyad A. Panjaitan

Share on

Ready to binge

Explore

Social

Extras