Composant d’affichage des prix
Un composant d’affichage de prix complexe et réactif pour un tableau de bord, avec prise en charge du thème sombre, utilisant Tailwind CSS dans un design plat minimaliste en niveaux de gris.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 max-w-sm w-full">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Current Price</h2>
<span class="text-sm text-gray-500 dark:text-gray-400">Updated: Just Now</span>
</div>
<div class="flex items-center mb-6">
<div class="text-4xl font-bold text-gray-900 dark:text-white">$1,234.56</div>
<div class="flex items-center ml-4">
<svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
<span class="text-lg font-semibold text-green-500">+1.23%</span>
</div>
</div>
<div class="border-t border-gray-200 dark:border-gray-700 pt-4">
<div class="text-sm text-gray-600 dark:text-gray-300 mb-2">Historical Data:</div>
<div class="flex space-x-4">
<div class="text-center">
<div class="text-md font-semibold text-gray-800 dark:text-white">High</div>
<div class="text-sm text-gray-600 dark:text-gray-300">$1,250.00</div>
</div>
<div class="text-center">
<div class="text-md font-semibold text-gray-800 dark:text-white">Low</div>
<div class="text-sm text-gray-600 dark:text-gray-300">$1,200.00</div>
</div>
<div class="text-center">
<div class="text-md font-semibold text-gray-800 dark:text-white">Volume</div>
<div class="text-sm text-gray-600 dark:text-gray-300">10k</div>
</div>
</div>
</div>
</div>Composants associés
Composant d’affichage des prix
Composant d’affichage des prix de style 3D qui prend en charge le mode sombre et les effets réactifs, mettant en valeur les détails du prix du produit.
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.
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.