Composant de galerie de produits
Un composant de galerie de produits réactif avec un design skeuomorphe, une palette de couleurs monochromatiques et une prise en charge du thème sombre, construit avec Tailwind CSS. Il présente une mise en page simple adaptée aux blogs et à la consommation de contenu, imitant les éléments du monde réel avec des ombres et des dégradés subtils.
HTML Code
<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>Composants associés
Composant de galerie de produits
Un composant de galerie de produits réactif avec une esthétique de conception matérielle, avec une mise en page basée sur une grille et des éléments interactifs adaptés à la présentation de produits ou d’un portefeuille. Inclut la prise en charge du mode sombre et utilise un schéma de couleurs analogue.
Composant de galerie de produits
Un composant de galerie de produits complexe et réactif conçu avec des micro-interactions subtiles, une palette de couleurs pastel et une prise en charge complète du mode sombre, adapté à un forum ou à une plate-forme communautaire. Comprend une sélection d’images interactive et des informations détaillées sur le produit.
Composant de galerie de produits
Un composant réactif de la galerie de produits conçu avec Glassmorphism, avec des éléments translucides semblables à du verre dépoli avec des effets de flou et une palette de couleurs complémentaire. Il comprend plusieurs éléments interactifs adaptés au commerce électronique avec prise en charge du mode sombre.