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 della scheda prodotto reattivo con microinterazioni nei toni della Terra, che fornisce supporto a tema scuro per la presentazione del portfolio.
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.
Componente Schede prodotto
Un componente di schede prodotto reattivo progettato utilizzando i principi di Material Design con Tailwind CSS. Supporta la modalità oscura e presenta ombre e layout basati su griglia.