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
Un composant complexe d’affichage des prix conçu dans un style skeuomorphe imitant les éléments du monde réel, adapté aux blogs et à la consommation de contenu avec une palette de couleurs triadique et un design réactif avec prise en charge du mode sombre.
Composant d’affichage des prix
Un composant d’affichage de prix réactif avec une esthétique rétro/vintage et des couleurs vives, adapté aux interfaces de médias sociaux, avec prise en charge du mode sombre.
Composant d’affichage des prix
Un composant d’affichage des prix inspiré de la 3D avec une palette de couleurs monochromatiques, conçu pour les interfaces de médias sociaux. Il s’agit d’un composant complexe et réactif avec prise en charge du mode sombre, construit à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.