Componente della galleria dei prodotti
Componente della galleria dei prodotti reattivo con supporto per il tema scuro, stile Material Design, combinazione di colori dei toni della terra, complessità semplice, per scopi di e-commerce.
Codice HTML
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-800 dark:text-gray-100">$29.99</span>
<button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-800 dark:text-gray-100">$39.50</span>
<button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-800 dark:text-gray-100">$19.00</span>
<button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente della galleria dei prodotti
Componente basato sui principi del Material Design, con design reattivo e supporto per temi scuri. Include immagini segnaposto.
Galleria prodotti Componente - Material Design
Un componente della galleria prodotti ispirato al Material Design con design reattivo, effetti al passaggio del mouse e supporto per temi scuri. Utilizza Tailwind CSS.
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti progettato in stile brutalismo con una combinazione di colori pastello adatta ai social media. Presenta un contrasto elevato, elementi di design audaci ed è ottimizzato per la modalità scura.