Componente della galleria dei prodotti
Un componente della galleria di prodotti reattivo che mostra articoli con microinterazioni coinvolgenti e un focus sui toni della terra.
Codice HTML
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 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-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover" />
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover" />
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover" />
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">User Reviews</h3>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-2" />
<div>
<strong class="text-gray-700 dark:text-gray-300">John Doe</strong>
<p class="text-gray-600 dark:text-gray-400">Great product! Really enjoyed using it.</p>
</div>
</div>
</div>
</div>Componenti correlati
Componente della galleria dei prodotti
Un componente complesso e reattivo della galleria di prodotti progettato con microinterazioni sottili, combinazione di colori pastello e supporto completo della modalità scura, adatto per un forum o una piattaforma di community. Offre una selezione interattiva di immagini e informazioni dettagliate sul prodotto.
Componente della galleria dei prodotti
Un componente semplice e reattivo per la galleria di prodotti con toni della terra, ottimizzato per la modalità oscura e il consumo di contenuti. Ideale per blog o siti di e-commerce che espongono articoli.
Galleria dei prodotti Cyberpunk
Un componente reattivo della galleria di prodotti con un'estetica cyberpunk, caratterizzato da sfondi scuri, colori vivaci (blu elettrico) ed elementi interattivi sottili, adatto per mostrare prodotti o un portfolio.