Componente della galleria dei prodotti
Componente della galleria prodotti reattivo con modalità scura
Codice HTML
<div class="bg-gray-900 py-10">
<div class="container mx-auto px-4">
<h2 class="text-pastel-light mb-8 text-3xl font-bold text-center">Product Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product 1" class="rounded-md mb-4 w-full">
<h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 1</h3>
<p class="text-pastel-light text-sm mb-4">A brief description of Product 1.</p>
<button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product 2" class="rounded-md mb-4 w-full">
<h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 2</h3>
<p class="text-pastel-light text-sm mb-4">A brief description of Product 2.</p>
<button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product 3" class="rounded-md mb-4 w-full">
<h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 3</h3>
<p class="text-pastel-light text-sm mb-4">A brief description of Product 3.</p>
<button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
</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.
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.
Componente della galleria dei prodotti
Un componente semplice e reattivo per la galleria di prodotti con toni della terra, ottimizzato per la modalità oscura e il consumo di contenuti. Ideale per blog o siti di e-commerce che espongono articoli.