Componente Schede prodotto
Componente Schede prodotto scheumorfiche per Dashboard con design reattivo e supporto per temi scuri.
Codice HTML
<!-- Product Cards Component -->
<div class="p-10 dark:bg-gray-900">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
</div>
<img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
<p class="text-gray-700 dark:text-gray-400 text-base mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-green-600 dark:text-green-400">$199.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
</div>
<img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
<p class="text-gray-700 dark:text-gray-400 text-base mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-green-600 dark:text-green-400">$299.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
</div>
<img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
<p class="text-gray-700 dark:text-gray-400 text-base mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-green-600 dark:text-green-400">$399.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Scheda Prodotto Skeuomorphic
Un componente della scheda prodotto scheumorfico per un dashboard, con stile in scala di grigi, complessità media, reattivo con modalità scura.
Componente Schede prodotto
Un componente della scheda prodotto reattivo progettato in stile Material Design, con una combinazione di colori in scala di grigi. Include un'immagine, un titolo, una descrizione e un pulsante con supporto per la modalità oscura utilizzando Tailwind CSS.
Componente Schede prodotto
Un semplice componente reattivo della scheda prodotto con microinterazioni, progettato per le interfacce dei social media che utilizzano Tailwind CSS, che supporta il tema scuro e la combinazione di colori in scala di grigi.