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
Industrial_Monochrome_Blog_Card
Une carte de consommation de blog/contenu complexe et réactive à l’esthétique industrielle, utilisant une palette de couleurs noir/blanc avec un seul accent vif. Comprend des éléments exposés et un design utilitaire, avec prise en charge du mode sombre.
grille-de-produits-monochrome-retro-monochrome
Un composant de grille de produits de commerce électronique rétro/vintage simple et réactif stylisé dans une palette violette monochromatique avec prise en charge du thème sombre. Le design évoque la nostalgie des années 80/90 avec une mise en page basique et des éléments minimaux, parfaits pour les expériences d’achat en ligne.
Composant Composants E-commerce - Documentation/Style Wiki
Un composant de commerce électronique complexe et réactif 'Documentation/Wiki' présentant des textures douces et peintes et des éléments artistiques avec une palette de couleurs bonbon/sucré (rose chewing-gum, vert menthe). Inclut la prise en charge du mode sombre et des éléments interactifs pour un site de documentation ou de base de connaissances.