Componente Schede prodotto
Un componente della scheda prodotto reattivo con design Glassmorphism, combinazione di colori in scala di grigi e supporto per temi scuri. Include più elementi interattivi adatti alle interfacce dei social media, come l'immagine del prodotto, il titolo, la descrizione, il prezzo e il pulsante Aggiungi al carrello. Il design utilizza elementi traslucidi simili al vetro smerigliato con effetti di sfocatura. Non viene utilizzato alcun Javascript, solo HTML con classi CSS Tailwind.
Codice HTML
<div class="flex flex-wrap items-center justify-center min-h-screen p-10 bg-gray-100 dark:bg-gray-900">
<!-- Product Card 1 -->
<div
class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
style="backdrop-filter: blur(10px);"
>
<img
class="object-cover w-full h-64"
src="https://picsum.photos/400/250?random=1"
alt="Product Image"
/>
<div
class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
></div>
<div class="relative p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 1</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
$120.00
</span>
<button
class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
>
View Details
</button>
</div>
<div class="flex items-center mt-4">
<img
class="w-10 h-10 mr-4 rounded-full"
src="https://randomuser.me/api/portraits/men/1.jpg"
alt="Avatar"
/>
<p class="text-gray-700 dark:text-gray-400">John Doe</p>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div
class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
style="backdrop-filter: blur(10px);"
>
<img
class="object-cover w-full h-64"
src="https://picsum.photos/400/250?random=2"
alt="Product Image"
/>
<div
class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
></div>
<div class="relative p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 2</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
$99.50
</span>
<button
class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
>
View Details
</button>
</div>
<div class="flex items-center mt-4">
<img
class="w-10 h-10 mr-4 rounded-full"
src="https://randomuser.me/api/portraits/women/2.jpg"
alt="Avatar"
/>
<p class="text-gray-700 dark:text-gray-400">Jane Smith</p>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div
class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
style="backdrop-filter: blur(10px);"
>
<img
class="object-cover w-full h-64"
src="https://picsum.photos/400/250?random=3"
alt="Product Image"
/>
<div
class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
></div>
<div class="relative p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 3</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
$249.99
</span>
<button
class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
>
View Details
</button>
</div>
<div class="flex items-center mt-4">
<img
class="w-10 h-10 mr-4 rounded-full"
src="https://randomuser.me/api/portraits/men/3.jpg"
alt="Avatar"
/>
<p class="text-gray-700 dark:text-gray-400">Peter Jones</p>
</div>
</div>
</div>
</div>
Componenti correlati
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.
Componente Schede prodotto
Un componente di schede prodotto reattivo progettato in stile brutalista con Tailwind CSS, con supporto per temi scuri e utilizzo di immagini segnaposto.
Componente Schede prodotto con interfaccia utente in modalità scura
Componente Schede prodotto con interfaccia utente in modalità scura ed effetti reattivi con Tailwind CSS.