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.
HTML Code
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/seed/product1/500/300" alt="Product Image 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-gray-900 dark:text-white font-bold text-xl">$19.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/seed/product2/500/300" alt="Product Image 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-gray-900 dark:text-white font-bold text-xl">$29.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/seed/product3/500/300" alt="Product Image 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-gray-900 dark:text-white font-bold text-xl">$39.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/seed/product4/500/300" alt="Product Image 4" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-gray-900 dark:text-white font-bold text-xl">$49.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Galerie de produits Composant - Material Design
Un composant de galerie de produits inspiré de Material Design avec un design réactif, des effets de survol et la prise en charge du thème sombre. Utilise Tailwind CSS.
Composant de galerie de produits
Un composant de galerie de produits avec des micro-interactions.
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.