Componente Componenti interattivi
Componente interattivo con Material Design, combinazione di colori triadica, complessità complessa, per e-commerce, con design reattivo e supporto per temi scuri.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-900 p-4">
<div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Short product description goes here. It can span a couple of lines.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-blue-600 dark:text-blue-400">$199.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-500">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Another short product description for variety and demonstration.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-red-600 dark:text-red-400">$249.50</span>
<button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 dark:bg-red-400 dark:hover:bg-red-500">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Yet another product description to fill the card space.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-green-600 dark:text-green-400">$145.00</span>
<button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 dark:bg-green-400 dark:hover:bg-green-500">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Componenti interattivi
Componente 3D interattivo con effetti reattivi e supporto per temi scuri
Scheda Prodotto Brutalista
Un semplice componente interattivo della scheda prodotto per l'e-commerce, con un design brutalista in scala di grigi. Presenta un'immagine del prodotto, un titolo, un prezzo e un pulsante "Aggiungi al carrello". Il componente è reattivo e supporta la modalità scura. Gli effetti al passaggio del mouse sono inclusi per l'interattività.
Componente Componenti interattivi
Un complesso componente interattivo per i social media con design scheumorfico e combinazione di colori monocromatici.