Componente Schede prodotto
Componente Schede prodotto con design 3D, effetti reattivi e supporto per temi scuri.
Codice HTML
<div class="flex flex-wrap justify-center bg-gray-100 dark:bg-gray-900 py-8">
<div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
<div class="relative overflow-hidden">
<img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
<span class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full">New</span>
</div>
<div class="p-6">
<h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Awesome Product Name</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">This is a brief description of the amazing product.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-gray-900 dark:text-white">$199.99</span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
</div>
</div>
</div>
<div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
<div class="relative overflow-hidden">
<img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
<span class="absolute top-2 right-2 bg-green-500 text-white text-xs font-bold px-3 py-1 rounded-full">Sale</span>
</div>
<div class="p-6">
<h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Another Great Product</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">Here's a description for another fantastic product.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-gray-900 dark:text-white">$149.50</span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
</div>
</div>
</div>
<div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
<div class="relative overflow-hidden">
<img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
</div>
<div class="p-6">
<h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Product with no tag</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">This is a product without a special tag.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-gray-900 dark:text-white">$99.00</span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
</div>
</div>
</div>
</div>Componenti correlati
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.
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.
Componente Schede prodotto
Un componente di schede prodotto reattivo progettato con lo stile scheumorfismo, la combinazione di colori dei toni della terra e il supporto del tema scuro. Ideale per cruscotti.