Cara membuat komponen card produk e-commerce dengan Tailwind adalah teknik yang wajib dikuasai jika kamu ingin membangun tampilan katalog produk yang modern, rapi, dan responsif. Tailwind CSS menawarkan utilitas yang fleksibel sehingga komponen bisa dibuat tanpa perlu menulis CSS manual. Dalam tutorial ini, kita akan membahas langkah-langkah membuat card produk yang menarik lengkap dengan grid, shadow, hover effect, dan responsivitas untuk semua ukuran layar. Desain card produk adalah salah satu elemen utama dalam website e-commerce. Card produk harus mampu menampilkan informasi penting seperti gambar, nama produk, harga, rating, dan tombol aksi, tetapi tetap terlihat rapi dan mudah dipahami. Tailwind CSS memberikan keleluasaan bagi developer untuk membuat komponen yang sangat fleksibel dengan utility-first approach.
Pada tutorial ini, kita akan mempelajari cara membuat komponen card produk yang modern dan profesional menggunakan Tailwind CSS, lengkap dengan fitur grid layout, efek bayangan, hover interaction, dan tampilan responsif.
Mengapa Card Produk Penting di E-Commerce?
Card produk menjadi wajah utama dari katalog online. Baik saat user menelusuri kategori, homepage, maupun halaman pencarian, card produk adalah elemen yang paling sering dilihat. Oleh karena itu, card harus:
-
Menarik perhatian visual
-
Mudah dibaca dan dipahami
-
Mengandung informasi penting
-
Memiliki call to action yang jelas
-
Responsif dan tetap rapi di berbagai ukuran layar
Tailwind sangat cocok karena memungkinkan pembentukan card kompleks tanpa stylesheet tambahan. Semua styling dipanggil melalui class, sehingga tidak ada konflik CSS.
Membuat Struktur Dasar Card Produk
Di bawah ini adalah struktur HTML dasar sebelum diberikan styling Tailwind:
<div class="product-card">
<img src="produk.jpg" alt="Produk" class="product-image">
<h3 class="product-title">Nama Produk</h3>
<p class="product-price">Rp 150.000</p>
<button class="btn-buy">Beli Sekarang</button>
</div>
Dengan Tailwind, kita akan memperkaya komponen ini menggunakan utility class.
Menambahkan Tailwind Class: Card yang Modern & Clean
Berikut versi Tailwind-nya:
<div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-all overflow-hidden">
<img src="produk.jpg" alt="Produk" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800">Nama Produk</h3>
<p class="text-blue-600 font-bold mt-1">Rp 150.000</p>
<button class="mt-3 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg transition">
Beli Sekarang
</button>
</div>
</div>
Penjelasan class utama:
-
bg-white→ background card putih -
rounded-xl→ sudut membulat -
shadow-md→ efek bayangan halus -
hover:shadow-xl→ bayangan lebih tebal saat hover -
transition-all→ animasi halus -
overflow-hidden→ agar radius kartu tetap rapi
Untuk gambar
-
object-cover→ agar gambar tidak terdistorsi -
h-48→ tinggi seragam
Button
-
w-full→ memenuhi lebar card -
bg-blue-600+hover:bg-blue-700→ efek interaksi
Membuat Grid Produk Responsif
Untuk halaman katalog, kita perlu menampilkan banyak card dalam grid responsif.
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
<!-- Card Produk 1 -->
<!-- Card Produk 2 -->
<!-- Card Produk 3 -->
<!-- dan seterusnya -->
</div>
Penjelasan responsivitas grid:
-
grid-cols-2→ tampilan mobile minimal dua kolom -
md:grid-cols-3→ saat layar medium (tablet) menjadi tiga kolom -
lg:grid-cols-4→ saat layar besar (desktop) menjadi empat kolom -
gap-5→ jarak antar card lebih lega
Hasilnya, produk tampil rapi dan tetap estetis di layar kecil hingga besar.
Menambahkan Hover Effect yang Menarik
Untuk meningkatkan UX, kita dapat menambahkan animasi halus pada card:
<div class="transform hover:-translate-y-1 hover:scale-105 transition-all duration-300">
Fitur ini memberi kesan card “terangkat” saat disentuh kursor.
Efek animasi membuat website terlihat lebih profesional dan modern.
Menambahkan Informasi Tambahan (Rating, Badge, dan Diskon)
Website e-commerce sering memiliki fitur tambahan seperti label diskon dan rating bintang. Kita bisa menambahkannya dengan mudah.
Badge Diskon di Atas Gambar
<div class="relative">
<img src="produk.jpg" class="w-full h-48 object-cover">
<span class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">
-30%
</span>
</div>
Rating
<div class="flex items-center text-yellow-500 text-sm mt-1">
⭐⭐⭐⭐⭐
<span class="text-gray-500 ml-1">(120)</span>
</div>
Tailwind memudahkan penggunaan warna dan layout tanpa CSS tambahan.
Versi Card Produk Lengkap (Siap Pakai)
Berikut card lengkap yang bisa langsung Anda gunakan:
<div class="bg-white rounded-xl shadow-md hover:shadow-xl transform hover:-translate-y-1 hover:scale-105 transition-all overflow-hidden">
<div class="relative">
<img src="produk.jpg" class="w-full h-48 object-cover">
<span class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">-30%</span>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800">Nama Produk Premium</h3>
<div class="flex items-center text-yellow-500 text-sm mt-1">
⭐⭐⭐⭐☆
<span class="text-gray-500 ml-1 text-xs">(87)</span>
</div>
<p class="text-blue-600 font-bold mt-2">Rp 150.000</p>
<button class="mt-3 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg transition">
Tambah ke Keranjang
</button>
</div>
</div>
Tips Membuat Card Produk yang Bagus
Agar komponen card semakin optimal, perhatikan ini:
✔ Gunakan gambar berkualitas tinggi
Gambar buram membuat produk kurang menarik.
✔ Pastikan teks tidak terlalu kecil
Judul minimal text-lg agar mudah dibaca.
✔ Hindari card terlalu penuh
Biarkan white space agar tampilan lebih elegan.
✔ Uji di berbagai ukuran layar
Gunakan DevTools untuk mengecek tampilan mobile, tablet, dan desktop.
✔ Konsisten dalam warna
Gunakan 1–2 warna utama agar desain tidak berantakan.
Tailwind sangat fleksibel sehingga kamu bisa membuat card custom sesuai identitas brand.
Kesimpulan
Membuat komponen card produk e-commerce dengan Tailwind sangat mudah berkat pendekatan utility-first yang fleksibel. Kamu dapat mengatur grid responsif, menambahkan shadow yang elegan, membuat efek hover interaktif, dan menambahkan berbagai elemen penting seperti rating, badge diskon, dan tombol CTA. Hasilnya adalah tampilan katalog produk yang profesional, rapi, dan siap digunakan pada website e-commerce modern.
Dengan contoh-contoh di atas, kamu dapat mengembangkan card produk sesuai kebutuhan, mengganti warna agar sesuai brand, atau memperkaya dengan fitur-fitur lanjutan seperti wishlist, quick-view, atau variannya.