Galerie de produits e-commerce
Il s’agit d’un composant de galerie complexe, réactif et compatible avec les thèmes sombres, avec un design minimaliste, une palette de couleurs complémentaires et plusieurs éléments interactifs adaptés au commerce électronique.
HTML Code
<div class="dark:bg-gray-900 dark:text-white min-h-screen">
<div class="container mx-auto px-4 py-8">
<h2 class="text-3xl font-bold text-center mb-8">Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2">Product Title 1</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-white">$19.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
</div>
<div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
<span>Category</span>
<span>In Stock</span>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2">Product Title 2</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-white">$29.50</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
</div>
<div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
<span>Category</span>
<span>In Stock</span>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2">Product Title 3</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-white">$45.00</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
</div>
<div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
<span>Category</span>
<span>Out of Stock</span>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2">Product Title 4</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-white">$15.75</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
</div>
<div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
<span>Category</span>
<span>In Stock</span>
</div>
</div>
</div>
<!-- Add more product cards as needed -->
</div>
<!-- Pagination/Load More (Example) -->
<div class="flex justify-center mt-8">
<button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white px-6 py-3 rounded-md hover:bg-gray-400 dark:hover:bg-gray-600">Load More</button>
</div>
</div>
</div>Composants associés
Composant Galerie
Un composant de galerie de style Neumorphisme avec des tons de terre à des fins de blog/contenu. Ce composant dispose d’une interface riche avec plusieurs éléments interactifs, d’un design réactif et d’une prise en charge du thème sombre.
Composant Neumorphism Gallery
Un composant de galerie Neumorphic réactif avec prise en charge du mode sombre. Les images sont des espaces réservés de picsum.photos et des avatars de randomuser.me.
Composant Galerie
Un composant de galerie simple utilisant Tailwind CSS, mettant en œuvre un style de conception Brutalism avec une palette de couleurs triadique et la prise en charge du thème sombre pour présenter des travaux ou des produits.