Merangkai Balok: Membangun Komponen UI Praktis
Semua teori yang kita pelajari di bab-bab sebelumnya (Warna, Spasi, Flexbox, State) pada akhirnya bertujuan
untuk satu hal: Membangun Komponen Visual yang Cantik dan Fungsional.
Mari kita gabungkan semua konsep utility-first tersebut untuk meracik 5 komponen web paling krusial:
Card, Navbar, Form, Modal (Dialog), dan Alert!
🃏 1. Komponen Profil Card (Kartu)
Card adalah kerangka dasar pembungkus informasi modern. Resep rahasianya adalah kombinasi bg-white, rounded-xl, shadow-md, dan overflow-hidden (agar gambar tidak
meluap keluar lekukan sudut).
Budi Santoso
Frontend Engineer
Mengubah kopi menjadi kode berkualitas semalaman. Spesialis React dan Tailwind CSS.
🧭 2. Navbar Lengket (Sticky Header)
Jantung navigasi sebuah web. Rahasia agar dia menempel melayang di atas saat di-scroll adalah sticky top-0 z-50 beserta latar
belakang berembun (Glassmorphism) menggunakan backdrop-blur-md bg-white/70.
👇 Coba scroll area gelap ini ke bawah
📝 3. Komponen Formulir Modern
Masalah terbesar form biasa adalah garis *"outline"* tebal biru/hitam bawaan browser Chrome/Firefox yang jelek.
Di Tailwind, kita menghilangkannya dengan outline-none, lalu memberikan
warna kilau modern menggunakan focus:ring-2 focus:ring-blue-500.
🪟 4. Modal Pop-up (Dialog)
Membuat lapisan tertinggi (z-index) di tengah layar. Kuncinya adalah kontainer layar penuh absolut fixed inset-0 z-50 flex items-center justify-center bg-black/50.
Hapus Proyek Ini?
Tindakan ini permanen. Semua data akan terhapus dari server selamanya.
📢 5. Peringatan (Alert)
Pita notifikasi penting. Gunakan varian status (hijau sukses, merah bahaya, kuning peringatan). Beri sedikit opacity pada border & background agar telihat *smooth*.
Pembayaran Berhasil
Struk tagihan telah kami kirimkan ke email Anda.
Sisa Kuota: 15%
Upgrade paket Anda sekarang sebelum kuota habis bulan depan.
🎓 Tips Komponen Produksi
Kelemahan pendekatan *Utility-First* seperti Tailwind adalah file HTML kamu bisa menjadi sangat kotor dan
panjang ke samping karena satu elemen bisa menampung 15 nama class.
Untuk skala produksi dunia nyata, kamu disarankan menggunakan bantuan Framekom / pustaka modern seperti
React / Web Components untuk membungkus nama-nama class panjang ini ke dalam Tag komponen
tunggal kecil dan bersih seperti <FormInput /> atau <ModalConfirm />.