Componente della galleria dei prodotti
Un componente responsive della galleria prodotti con un'estetica Material Design, caratterizzato da un layout basato su griglia ed elementi interattivi adatti per mostrare prodotti o un portfolio. Include il supporto per la modalità oscura e utilizza una combinazione di colori analoga.
Codice HTML
<div class="container mx-auto p-4"">
<!-- Product Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover"">
<div class="p-4"">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-3"">
<span class="text-xl font-bold text-gray-900 dark:text-white"">$49.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover"">
<div class="p-4"">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-3"">
<span class="text-xl font-bold text-gray-900 dark:text-white"">$29.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover"">
<div class="p-4"">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-3"">
<span class="text-xl font-bold text-gray-900 dark:text-white"">$79.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
<img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover"">
<div class="p-4"">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-3"">
<span class="text-xl font-bold text-gray-900 dark:text-white"">$19.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
</div>
</div>
</div>
</div>
</div>
Componenti correlati
Componente della galleria dei prodotti
Un componente complesso della galleria di prodotti ispirato alla carta/stampa con colori complementari, progettato per il consumo di contenuti come un blog, caratterizzato da dettagli ricchi, reattività e supporto per la modalità scura.
Brutalist_RealEstate_Product_Gallery
Un componente complesso della galleria di prodotti in stile brutalista per gli annunci immobiliari, caratterizzato da toni gioiello, colori ricchi e saturi, contrasto elevato e supporto per la modalità scura. Progettato per la visualizzazione dei dettagli delle proprietà con più elementi interattivi.
Componente della galleria dei prodotti
Componente della galleria prodotti reattivo con supporto per la modalità scura