Componente della galleria dei prodotti
Una galleria di prodotti reattiva con un'estetica retrò/vintage, con supporto per la modalità scura. Include immagini e avatar generati dai servizi segnaposto.
Codice HTML
<div class="max-w-7xl mx-auto p-8">
<h2 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Retro Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200?random=1" alt="Product 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300">Seller Name</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200?random=2" alt="Product 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300">Seller Name</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200?random=3" alt="Product 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">$39.99</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300">Seller Name</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200?random=4" alt="Product 4" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-400">$49.99</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300">Seller Name</span>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente della galleria dei prodotti
Componente della galleria prodotti reattivo con supporto per la modalità scura
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.
Galleria prodotti Componente - Material Design
Un componente della galleria prodotti ispirato al Material Design con design reattivo, effetti al passaggio del mouse e supporto per temi scuri. Utilizza Tailwind CSS.