Componente Schede prodotto
Un componente della scheda prodotto reattivo con design 3D, combinazione di colori analoga e supporto per la modalità scura, progettato per le interfacce dei social media.
Codice HTML
<div class="max-w-sm mx-auto relative z-10 transform transition-transform duration-500 ease-in-out hover:scale-105">
<div class="bg-gradient-to-br from-teal-400 via-blue-500 to-purple-600 dark:from-gray-700 dark:via-gray-800 dark:to-black shadow-xl rounded-lg overflow-hidden dark:shadow-lg">
<div class="relative h-48">
<img class="w-full h-full object-cover" src="https://picsum.photos/seed/picsum/400/300" alt="Product Image">
<div class="absolute top-0 right-0 bg-blue-600 text-white px-3 py-1 m-2 rounded-lg text-sm font-bold dark:bg-blue-400">New</div>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Awesome Product Title</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mt-1">This is a short description of the product, highlighting its key features and benefits.</p>
<div class="flex items-center mt-4">
<div class="text-xl font-bold text-blue-600 dark:text-blue-400">$99.99</div>
<button class="ml-auto bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-500">Add to Cart</button>
</div>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<span class="text-sm text-gray-700 dark:text-gray-400">Posted by John Doe</span>
</div>
</div>
</div>
</div>
<style>
/* Basic 3D effect. More advanced 3D requires transforms on hover/active states combined with perspective on parent. */
.shadow-xl {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.dark\:shadow-lg {
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
</style>Componenti correlati
Componente Schede prodotto
Un componente di schede prodotto reattivo con microinterazioni, che utilizza una combinazione di colori in scala di grigi e supporta la modalità scura. Ideale per blog o consumo di contenuti.
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 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.