Cara membuat tampilan web modern dengan Tailwind Components (Navbar, Card, dan Modal) menjadi semakin penting untuk dipahami, terutama bagi developer yang ingin membangun UI responsif, bersih, dan cepat tanpa menulis banyak CSS. Tailwind memberikan fleksibilitas luar biasa melalui utility-first approach, sehingga komponen seperti navbar, card produk, dan modal dapat dibuat dengan mudah, cepat, dan sangat bisa dikustomisasi sesuai kebutuhan proyek. Membangun website modern saat ini tidak hanya soal fungsionalitas, tetapi juga tampilan antarmuka yang bersih dan profesional. Tailwind CSS hadir sebagai framework utility-first yang memungkinkan developer membuat tampilan canggih tanpa repot membuat stylesheet manual. Dengan Tailwind Components, kamu dapat membangun elemen UI seperti navbar, card, dan modal dengan jauh lebih cepat.
Tutorial ini akan membahas bagaimana membuat tiga komponen penting dalam UI modern: Navbar, Card, dan Modal dengan Tailwind CSS. Semua contoh bisa langsung kamu salin dan kembangkan.
Mengapa Menggunakan Tailwind Components?
Tailwind Components adalah elemen UI yang dibangun menggunakan class Tailwind sehingga:
✔ Fleksibel
Setiap detail UI dapat disesuaikan dengan mudah tanpa keluar dari HTML.
✔ Cepat
Tidak perlu menulis CSS manual, cukup gunakan utility classes.
✔ Konsisten
Semua elemen tampil seragam dan rapi karena mengikuti sistem spacing dan scale bawaan Tailwind.
✔ Responsif otomatis
Tailwind memudahkan penggunaan breakpoint seperti sm:, md:, lg: untuk membuat desain adaptif di semua layar.
Dengan alasan ini, membuat tampilan web modern menjadi jauh lebih efisien.
Membuat Navbar Modern dengan Tailwind
Navbar adalah elemen pertama yang dilihat pengunjung. Desain yang rapi dan responsif akan memberi kesan profesional.
Berikut contoh navbar modern:
<nav class="w-full bg-white shadow-md fixed top-0 left-0 z-50">
<div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
<h1 class="text-2xl font-bold text-gray-800">MyWebsite</h1>
<ul class="hidden md:flex space-x-6 text-gray-700 font-medium">
<li><a href="#" class="hover:text-blue-600 transition">Home</a></li>
<li><a href="#" class="hover:text-blue-600 transition">Produk</a></li>
<li><a href="#" class="hover:text-blue-600 transition">Profil</a></li>
<li><a href="#" class="hover:text-blue-600 transition">Kontak</a></li>
</ul>
<button class="md:hidden">
<svg class="w-7 h-7 text-gray-700" fill="none" stroke="currentColor" stroke-width="2"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</nav>
Penjelasan Tailwind Classes:
-
fixed top-0→ navbar selalu berada di atas -
shadow-md→ memberi efek profesional -
hidden md:flex→ menu hanya muncul di layar medium ke atas -
hover:text-blue-600→ interaksi visual elegan -
max-w-6xl mx-auto→ konten terpusat
Dengan ini, navbar tampil modern dan responsif.
Membuat Card Produk Modern
Card adalah komponen penting untuk menampilkan produk, artikel, atau konten visual lainnya.
Berikut contoh card modern yang responsif:
<div class="max-w-sm bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transform hover:-translate-y-1 transition">
<img src="https://via.placeholder.com/400" class="w-full h-48 object-cover" />
<div class="p-4">
<h3 class="text-lg font-semibold mb-2 text-gray-800">Nama Produk</h3>
<p class="text-gray-600 text-sm">Deskripsi singkat produk agar terlihat lebih menarik.</p>
<p class="text-blue-600 font-bold mt-3">Rp 150.000</p>
<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg transition">
Beli Sekarang
</button>
</div>
</div>
Kenapa Card Ini Layak Dipakai?
✔ rounded-xl memberi kesan lembut
✔ shadow-md membuat card tampak melayang
✔ hover:-translate-y-1 memberi animasi modern
✔ object-cover memastikan gambar tidak terdistorsi
✔ Responsif tanpa kode tambahan
Untuk grid layout:
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> <!-- Card --> <!-- Card --> <!-- Card --> </div>
Dengan grid ini, card otomatis menyesuaikan ukuran layar.
Membuat Modal dengan Tailwind (Tanpa Library Tambahan)
Modal berguna untuk popup seperti form login, detail produk, atau peringatan.
Ini modal sederhana dan modern:
<div id="modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
<div class="bg-white p-6 rounded-xl shadow-lg w-80">
<h2 class="text-xl font-semibold text-gray-800 mb-3">Judul Modal</h2>
<p class="text-gray-600 mb-4">Ini merupakan contoh modal dengan Tailwind.</p>
<button onclick="closeModal()" class="w-full bg-red-500 hover:bg-red-600 text-white py-2 rounded-lg transition">
Tutup
</button>
</div>
</div>
<script>
function openModal() {
document.getElementById('modal').classList.remove('hidden');
}
function closeModal() {
document.getElementById('modal').classList.add('hidden');
}
</script>
Penjelasan:
-
fixed inset-0→ modal menutupi seluruh layar -
bg-black bg-opacity-50→ overlay gelap elegan -
flex items-center justify-center→ konten modal berada di tengah -
rounded-xl shadow-lg→ modal minimalis dan modern
Dengan sedikit JavaScript, modal sudah berfungsi dengan baik.
Menggabungkan Semua Komponen untuk Tampilan Web Modern
Setelah memiliki navbar, card, dan modal, kita bisa menyusun layout seperti berikut:
<body class="bg-gray-100">
<!-- Navbar -->
<div class="pt-20 max-w-6xl mx-auto px-4">
<h2 class="text-2xl font-bold mb-5">Produk Terbaru</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Card -->
<!-- Card -->
<!-- Card -->
</div>
</div>
<button onclick="openModal()" class="fixed bottom-6 right-6 bg-blue-600 text-white p-4 rounded-full shadow-lg hover:bg-blue-700 transition">
Buka Modal
</button>
<!-- Modal -->
</body>
Sekarang Anda sudah memiliki tampilan website modern yang terdiri dari komponen Tailwind paling umum.
Tips Mendesain dengan Tailwind Agar Lebih Modern
✔ Gunakan spacing besar
p-6, py-4, gap-6 membuat desain lebih lega dan elegan.
✔ Hindari warna terlalu banyak
Gunakan maksimal 2 warna utama.
✔ Tambahkan animasi halus
transition, transform, hover: membuat UI terasa premium.
✔ Gunakan shadow ringan
Shadow besar membuat desain terlihat berlebihan.
✔ Konsisten pada font, radius, dan style
Komponen harus terlihat seolah dari satu sistem desain.
Kesimpulan
Mempelajari cara membuat tampilan web modern dengan Tailwind Components adalah langkah penting bagi siapa saja yang ingin membangun UI cepat tanpa CSS manual. Dengan utility-first Tailwind, kamu bisa membuat navbar yang responsif, card produk yang elegan, dan modal yang modern hanya dengan HTML + class Tailwind saja.
Tailwind memberikan fleksibilitas untuk membuat komponen UI apa pun sesuai kebutuhan, dan komponen-komponen ini dapat dikombinasikan menjadi tampilan website profesional, responsif, dan enak dipandang.