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 reattivo della galleria di prodotti che utilizza Tailwind CSS con uno stile di design neumorfico, una combinazione di colori complementari e un layout complesso adatto per i siti Web aziendali. Include il supporto per la modalità oscura e utilizza immagini da picsum.photos.
Componente della galleria dei prodotti
Un componente della galleria di prodotti progettato in stile Material Design con una combinazione di colori triadica. È dotato di layout basati su griglia, animazioni reattive e supporta il tema scuro. La galleria include immagini e avatar ed è adatta per una dashboard.
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.