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.
HTML Code
<div class="container mx-auto p-10 bg-gray-200 dark:bg-gray-800">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10">
<!-- Product Card 1 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-blue-600 dark:text-blue-400">$99.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-green-600 dark:text-green-400">$149.99</span>
<button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-inner-neumorphic-dark">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-red-600 dark:text-red-400">$199.99</span>
<button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/seed/product4/400/300" alt="Product Image 4" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-purple-600 dark:text-purple-400">$249.99</span>
<button class="bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
<!-- Product Card 5 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/seed/product5/400/300" alt="Product Image 5" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 5</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-yellow-600 dark:text-yellow-400">$299.99</span>
<button class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
<!-- Product Card 6 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/seed/product6/400/300" alt="Product Image 6" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 6</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-teal-600 dark:text-teal-400">$349.99</span>
<button class="bg-teal-500 hover:bg-teal-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
</div>
</div>
<style>
/* Custom Neumorphic Shadows */
.shadow-neumorphic-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #454545, -7px -7px 15px #b3b3b3;
}
.shadow-inner-neumorphic-light {
box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-inner-neumorphic-dark {
box-shadow: inset 5px 5px 10px #454545, inset -5px -5px 10px #b3b3b3;
}
</style>
Composants associés
Composant de galerie de produits
Un composant de galerie de produits réactif présentant des articles avec des micro-interactions attrayantes et un accent sur les tons de terre.
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é.
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.