Componente Schede prodotto
Un semplice componente della scheda prodotto per l'e-commerce progettato in stile Material Design utilizzando una combinazione di colori in scala di grigi e un design reattivo con supporto per il tema scuro.
Codice HTML
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/200/300" alt="Product Image">
<div class="p-4">
<h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400">A brief description of the product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$99.99</span>
<button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=2" alt="Product Image">
<div class="p-4">
<h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">A brief description of the second product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$89.99</span>
<button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=3" alt="Product Image">
<div class="p-4">
<h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">A brief description of the third product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$79.99</span>
<button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
</div>Componenti correlati
Componente Schede prodotto
Schede prodotto responsive con effetto vetro smerigliato Glassmorphism con colori pastello, con supporto alla modalità scura. Adatto per le interfacce dei social media.
Componente Schede prodotto
Un componente della scheda prodotto reattivo con design retrò/vintage, combinazione di colori analoga e supporto per temi scuri, adatto per una dashboard. Il design include segnaposto per immagini e dettagli del prodotto.
Schede prodotto Componente 52
Un componente della scheda prodotto reattivo che utilizza lo stile di progettazione Glassmorphism con supporto per il tema scuro e Tailwind CSS.