Schede prodotto Componente 52
Un componente della scheda prodotto reattivo che utilizza lo stile di progettazione Glassmorphism con supporto per il tema scuro e Tailwind CSS.
Codice HTML
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
<div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg p-4 shadow-lg transition duration-300 ease-in-out transform hover:scale-105 dark:bg-gray-800 dark:bg-opacity-30">
<img src="https://picsum.photos/200/300?random=1" alt="Product Image" class="w-full h-32 object-cover rounded-lg mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 1</h2>
<p class="text-gray-600 dark:text-gray-300">This is a short description of the product that highlights its features.</p>
<div class="mt-4 flex justify-between items-center">
<span class="text-lg font-bold text-gray-800 dark:text-white">$49.99</span>
<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200">Add to Cart</button>
</div>
</div>
<div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg p-4 shadow-lg transition duration-300 ease-in-out transform hover:scale-105 dark:bg-gray-800 dark:bg-opacity-30">
<img src="https://picsum.photos/200/300?random=2" alt="Product Image" class="w-full h-32 object-cover rounded-lg mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 2</h2>
<p class="text-gray-600 dark:text-gray-300">This is a short description of the product that highlights its features.</p>
<div class="mt-4 flex justify-between items-center">
<span class="text-lg font-bold text-gray-800 dark:text-white">$59.99</span>
<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200">Add to Cart</button>
</div>
</div>
<div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg p-4 shadow-lg transition duration-300 ease-in-out transform hover:scale-105 dark:bg-gray-800 dark:bg-opacity-30">
<img src="https://picsum.photos/200/300?random=3" alt="Product Image" class="w-full h-32 object-cover rounded-lg mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 3</h2>
<p class="text-gray-600 dark:text-gray-300">This is a short description of the product that highlights its features.</p>
<div class="mt-4 flex justify-between items-center">
<span class="text-lg font-bold text-gray-800 dark:text-white">$39.99</span>
<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200">Add to Cart</button>
</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
Schede prodotto responsive con effetto vetro smerigliato Glassmorphism con colori pastello, con supporto alla modalità scura. Adatto per le interfacce dei social media.
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.