Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti con un design scheumorfico, una combinazione di colori monocromatica e il supporto per temi scuri, creato con Tailwind CSS. Presenta un layout semplice adatto ai blog e al consumo di contenuti, imitando gli elementi del mondo reale con ombre e sfumature sottili.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center font-sans">
<div class="container max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 border-gray-200 dark:border-gray-700 border-b-8 border-r-4 transition-all duration-300 ease-in-out">
<h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center tracking-tight drop-shadow-md">Our Gallery</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Vintage Camera</h2>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">A classic camera with a modern touch, perfect for capturing timeless moments.</p>
<span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$299</span>
</div>
<!-- Product Card 2 -->
<div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Leather Journal</h2>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">Handcrafted leather journal for your thoughts and creative expressions.</p>
<span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$45</span>
</div>
<!-- Product Card 3 -->
<div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Classic Turntable</h2>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">Experience the warm, rich sound of vinyl with this elegant turntable.</p>
<span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$549</span>
</div>
</div>
</div>
</div>Componenti correlati
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.
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti progettato per l'interfaccia utente in modalità scura, con colori complementari, adatto per le interfacce di rete dei social media.
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.