Composant de galerie de produits
Un composant de galerie de produits simple et réactif avec des tons de terre, optimisé pour le mode sombre et la consommation de contenu. Idéal pour les blogs ou les sites e-commerce affichant des articles.
HTML Code
<div class="bg-stone-100 dark:bg-stone-900 py-8 sm:py-12 md:py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-extrabold text-stone-900 dark:text-stone-50 mb-8 text-center sm:text-4xl">Our Latest Creations</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/1018/400/300" alt="Forest Stream">
<div class="p-4">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Enchanted Forest Canvas</h3>
<p class="text-stone-600 dark:text-stone-300 text-sm mb-3">A breathtaking view captured on canvas, perfect for any nature lover's home.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-stone-900 dark:text-stone-50">$120.00</span>
<button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/1060/400/300" alt="Desert Landscape">
<div class="p-4">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Desert Bloom Sculpture</h3>
<p class="text-stone-600 dark:text-stone-300 text-sm mb-3">Handcrafted sculpture inspired by the resilient beauty of desert florals.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-stone-900 dark:text-stone-50">$95.00</span>
<button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/1004/400/300" alt="Mountain Peak">
<div class="p-4">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Alpine Summit Print</h3>
<p class="text-stone-600 dark:text-stone-300 text-sm mb-3">A stunning photographic print capturing the majesty of a mountain peak.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-stone-900 dark:text-stone-50">$80.00</span>
<button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/1020/400/300" alt="Beach Sunset">
<div class="p-4">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Coastal Serenity Frame</h3>
<p class="text-stone-600 dark:text-stone-300 text-sm mb-3">Bring the calming essence of the ocean into your space with this piece.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-stone-900 dark:text-stone-50">$110.00</span>
<button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant de galerie de produits
Une galerie de produits réactive avec une esthétique rétro/vintage, avec prise en charge du mode sombre. Il comprend des images et des avatars générés à partir de services d’espace réservé.
Watercolor_Artistic_Dating_Product_Gallery
Un composant de galerie de produits complexe et réactif avec un style de conception « Aquarelle/Artistique » et une palette de couleurs « Candy/Sweet », adapté aux plateformes de rencontres et aux réseaux sociaux. Dispose de plusieurs éléments interactifs, de la prise en charge du mode sombre et du HTML sémantique.
Composant de galerie de produits
Composant de galerie de produits basé sur les principes de conception matérielle, avec un design réactif et une prise en charge du thème sombre. Comprend des images de remplacement.