Composant de galerie de produits
Composant de galerie de produits réactif avec prise en charge du thème sombre, style de conception matérielle, palette de couleurs de tons de terre, complexité simple, à des fins de commerce électronique.
HTML Code
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-800 dark:text-gray-100">$29.99</span>
<button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-800 dark:text-gray-100">$39.50</span>
<button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-800 dark:text-gray-100">$19.00</span>
<button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant de galerie de produits
Un composant de galerie de produits réactif utilisant Tailwind CSS avec un style de conception Neumorphic, une palette de couleurs complémentaire et une mise en page complexe adaptée aux sites Web d’entreprise. Inclut la prise en charge du mode sombre et utilise des images de picsum.photos.
Composant de galerie de produits
Un composant de galerie de produits réactif conçu pour le mode sombre, avec des images et des avatars avec Tailwind CSS.
Composant de galerie de produits
Un composant de galerie de produits réactif conçu selon les principes de Material Design, avec des couleurs de terre, adapté aux tableaux de bord et prenant en charge le mode sombre.