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.
Codice HTML
<div class="flex flex-col min-h-screen bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-black items-center justify-center p-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/250?random=1" alt="Product Image" class="rounded-lg mb-4">
<h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Pastel Dreams</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">Embrace the soft hues and gentle vibes with this serene collection.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200 text-sm">John Doe</span>
</div>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-purple-700 dark:text-purple-300">$29.99</span>
<button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/250?random=2" alt="Product Image" class="rounded-lg mb-4">
<h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Whispering Lilacs</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">Delicate and enchanting, perfect for a touch of elegance in your feed.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200 text-sm">Jane Smith</span>
</div>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-pink-700 dark:text-pink-300">$35.50</span>
<button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/250?random=3" alt="Product Image" class="rounded-lg mb-4">
<h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Misty Mornings</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">Soft and inviting, ideal for sharing peaceful moments with your followers.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200 text-sm">Peter Jones</span>
</div>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-green-700 dark:text-green-300">$22.00</span>
<button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
</div>
</div>
</div>
</div>Componenti correlati
Componente Schede prodotto schedembe
Componente di schede prodotto semplice e reattivo con un design scheumorfico in scala di grigi, adatto per siti web aziendali/aziendali. Include il supporto per la modalità oscura.
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 elementi 3D e una combinazione di colori vivaci, che incorpora un tema scuro per il consumo di blog e contenuti. È caratterizzato da una complessità media con elementi interattivi per il coinvolgimento dell'utente.