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
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.
Componente della galleria dei prodotti
Un componente complesso e reattivo della galleria di prodotti con un'estetica di progettazione 3D e una combinazione di colori seppia/marrone, adatto per applicazioni tecnologiche/SaaS. Include più elementi interattivi e supporto per la modalità oscura.
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti progettato per la modalità scura, con immagini e avatar con Tailwind CSS.