Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti progettato per la modalità scura, con immagini e avatar con Tailwind CSS.
Codice HTML
<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4">Product Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl">Product Title 1</h3>
<p class="text-gray-400">$29.99</p>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl">Product Title 2</h3>
<p class="text-gray-400">$39.99</p>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl">Product Title 3</h3>
<p class="text-gray-400">$49.99</p>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=4" alt="Product Image" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl">Product Title 4</h3>
<p class="text-gray-400">$59.99</p>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=5" alt="Product Image" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl">Product Title 5</h3>
<p class="text-gray-400">$69.99</p>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=6" alt="Product Image" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl">Product Title 6</h3>
<p class="text-gray-400">$79.99</p>
</div>
</div>
</div>
<div class="mt-6">
<h2 class="text-xl font-semibold mb-2">Featured Seller</h2>
<div class="flex items-center bg-gray-800 p-3 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
<div>
<p class="font-semibold">John Doe</p>
<p class="text-gray-400">Best Seller</p>
</div>
</div>
</div>
</div>Componenti correlati
Componente della galleria dei prodotti
Un componente della galleria di prodotti reattivo progettato con uno stile neumorfismo e una combinazione di colori triadica, adatto per mostrare lavori o prodotti, con supporto per temi scuri.
ProductGalleryComponent
Galleria prodotti Componente con design brutalista, supporto per modalità reattiva e scura.
Componente della galleria dei prodotti
Componente della galleria dei prodotti reattivo con supporto per il tema scuro, stile Material Design, combinazione di colori dei toni della terra, complessità semplice, per scopi di e-commerce.