Componente della galleria dei prodotti
Un semplice componente della galleria di prodotti progettato con elementi 3D per la profondità, utilizzando una combinazione di colori triadica. È reattivo e supporta il tema scuro, adatto per mostrare lavori o prodotti.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-center text-gray-800 dark:text-gray-200">Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product 1">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product 2">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product 3">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=4" alt="Product 4">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 4</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=5" alt="Product 5">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 5</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=6" alt="Product 6">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 6</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
</div>
</div>
</div>
</div>Componenti correlati
Componente della galleria dei prodotti
Un componente della galleria di prodotti con microinterazioni.
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti con un'interfaccia utente scura, combinazione di colori seppia/marrone, adatto per siti Web aziendali/aziendali. Include più schede prodotto con immagini, titoli, descrizioni e prezzi e supporta la modalità scura.
Componente della galleria dei prodotti
Un componente semplice e reattivo per la galleria di prodotti con uno stile di design glassmorphism, combinazione di colori in bianco e nero con un accento brillante, adatto per bacheche di lavoro o piattaforme di carriera. Include il supporto per la modalità oscura.