Fiche produit e-commerce Neumorphic
Un composant de carte produit e-commerce de style soft UI (Neumorphism) avec des couleurs en niveaux de gris, conçu pour les sites Web d’entreprise. Il comporte une image de produit, un titre, un prix et un bouton « Ajouter au panier », entièrement réactif et avec prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<!-- Product Card Container -->
<div class="max-w-xs w-full rounded-2xl p-6 shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-100 dark:bg-gray-800 transition-all duration-300 ease-in-out">
<!-- Product Image -->
<div class="relative w-full h-48 rounded-xl overflow-hidden mb-6 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark flex items-center justify-center">
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="absolute inset-0 w-full h-full object-cover rounded-xl transition-transform duration-300 hover:scale-105">
</div>
<!-- Product Details -->
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 transition-colors duration-300">
Sleek Wireless Headphones
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 transition-colors duration-300 line-clamp-2">
Experience immersive sound with active noise cancellation and comfortable earcups.
</p>
<div class="flex items-end justify-between mb-6">
<span class="text-2xl font-bold text-gray-900 dark:text-gray-50 transition-colors duration-300">
$199.99
</span>
<!-- Star Rating Placeholder -->
<div class="flex space-x-1 text-gray-400 dark:text-gray-600">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
</div>
</div>
<!-- Add to Cart Button -->
<button class="w-full py-3 rounded-xl font-medium text-lg text-gray-800 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark hover:text-gray-900 hover:dark:text-white transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 active:shadow-neumorphic-light-inset active:dark:shadow-neumorphic-dark-inset">
Add to Cart
</button>
</div>
<!-- Custom Styles for Neumorphism Shadows (can be added to a global CSS file or <style> tag) -->
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #2c2c2c;
}
.shadow-neumorphic-light-inset {
box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark-inset {
box-shadow: inset 6px 6px 12px #1c1c1c, inset -6px -6px 12px #2c2c2c;
}
.shadow-inner-neumorphic-light {
box-shadow: inset 2px 2px 5px #bebebe, inset -2px -2px 5px #ffffff;
}
.dark .shadow-inner-neumorphic-dark {
box-shadow: inset 2px 2px 5px #1c1c1c, inset -2px -2px 5px #2c2c2c;
}
</style>
</div>Composants associés
Fiche produit e-commerce rétro
Une fiche produit e-commerce rétro/vintage avec un design réactif et une prise en charge du mode sombre.
Composant Composants de commerce électronique
Un composant de commerce électronique réactif avec des micro-interactions, une palette de couleurs analogue et une prise en charge du thème sombre.
Composant de tableau de bord e-commerce
Un composant simple de tableau de bord de commerce électronique avec un design brutaliste et dynamique, avec une mise en page réactive et une prise en charge du thème sombre.