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
Un componente complesso e reattivo della galleria di prodotti con uno stile di design a nemorfismo e una combinazione di colori complementari, su misura per piattaforme musicali/audio. Include il supporto per la modalità oscura e funzionalità come elenchi di tracce, informazioni sull'artista e pulsanti di riproduzione.
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.
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti con un design scheumorfico, una combinazione di colori monocromatica e il supporto per temi scuri, creato con Tailwind CSS. Presenta un layout semplice adatto ai blog e al consumo di contenuti, imitando gli elementi del mondo reale con ombre e sfumature sottili.