Composant d’affichage des prix
Un composant d’affichage des prix de style Neumorphism avec une palette de couleurs complémentaires (orange doux et bleu clair), d’une complexité modérée pour le commerce électronique. Il présente un design réactif avec prise en charge du thème sombre. Le composant affiche une image, un titre et un prix du produit à l’aide d’un bouton « Ajouter au panier ». Le mode sombre utilise des couleurs complémentaires désaturées.
HTML Code
<div class="p-8 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto transition-all duration-300">
<!-- Product Image (Placeholder) -->
<div class="w-full h-48 bg-gray-300 dark:bg-gray-700 rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark overflow-hidden">
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-full object-cover">
</div>
<!-- Product Title -->
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2 truncate">Neumorphic Product Title</h3>
<!-- Product Description (Optional - Uncomment if needed) -->
<!-- <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2">This is a brief description of the product, showcasing its features and benefits.</p> -->
<!-- Price and Add to Cart -->
<div class="flex items-center justify-between mb-4">
<span class="text-3xl font-bold text-orange-600 dark:text-orange-400">$129.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-lg shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark active:shadow-inner-neumorphic-btn-light dark:active:shadow-inner-neumorphic-btn-dark transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
Add to Cart
</button>
</div>
<!-- Additional Details (Optional) -->
<div class="grid grid-cols-2 gap-3 text-sm text-gray-700 dark:text-gray-300">
<div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<p><strong class="text-gray-800 dark:text-gray-200">Category:</strong> Electronics</p>
</div>
<div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<p><strong class="text-gray-800 dark:text-gray-200">Availability:</strong> In Stock</p>
</div>
</div>
</div>
<!-- TailwindCSS Config for Neumorphism Shadows (Add this to your tailwind.config.js) -->
<div style="display: none;">
<!-- You would typically add this to your tailwind.config.js file under 'extend' -->
<pre>
module.exports = {
theme: {
extend: {
boxShadow: {
'neumorphic-light': '9px 9px 18px #a1a1a1, -9px -9px 18px #ffffff',
'neumorphic-dark': '9px 9px 18px #4a4a4a, -9px -9px 18px #1a1a1a',
'inner-neumorphic-light': 'inset 5px 5px 10px #bdbdbd, inset -5px -5px 10px #ffffff',
'inner-neumorphic-dark': 'inset 5px 5px 10px #333333, inset -5px -5px 10px #6d6d6d',
'neumorphic-btn-light': '6px 6px 12px #9a9a9a, -6px -6px 12px #ffffff',
'neumorphic-btn-dark': '6px 6px 12px #444444, -6px -6px 12px #222222',
'inner-neumorphic-btn-light': 'inset 3px 3px 6px #8c8c8c, inset -3px -3px 6px #ffffff',
'inner-neumorphic-btn-dark': 'inset 3px 3px 6px #3b3b3b, inset -3px -3px 6px #5f5f5f',
}
}
}
}
</pre>
</div>
</div>Composants associés
Composant d’affichage des prix
Composant d’affichage des prix de style Neumorphism avec des effets réactifs et la prise en charge du thème sombre.
Composant d’affichage des prix
Un composant d’affichage des prix sur le thème rétro/vintage pour le e-commerce, avec une palette de couleurs triadique. Il s’agit d’un design complexe et réactif avec prise en charge du thème sombre, construit avec Tailwind CSS.
Composant d’affichage des prix
Composant d’affichage des prix avec un design réactif, la prise en charge du mode sombre et une palette de couleurs vives.