Componente della galleria dei prodotti
Una galleria di prodotti reattiva con uno stile retrò/vintage, caratterizzata da una combinazione di colori complementari e progettata per siti Web aziendali/aziendali con supporto per la modalità scura.
Codice HTML
<div class="max-w-6xl mx-auto p-5">
<h2 class="text-3xl font-bold text-center text-amber-500">Product Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 1</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$29.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 2</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$39.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 3</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$19.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 4</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$49.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 5</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$59.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 6</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$69.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente della galleria dei prodotti
Componente della galleria prodotti reattivo con modalità scura
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti con lo stile di design Glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura e supporto per temi scuri. Mostra le immagini dei prodotti e gli avatar degli utenti.
Componente della galleria dei prodotti
Un componente della galleria di prodotti con un design brutalista, una combinazione di colori in scala di grigi e una complessità moderata. È progettato per uno scopo di dashboard ed è reattivo con supporto per il tema scuro.