Luxury_Premium_Crypto_Stat_Card
Une carte statistique crypto/blockchain simple et élégante avec des tons de bijoux, un design réactif et une prise en charge du mode sombre, adaptée aux applications de luxe et haut de gamme.
HTML Code
<div class="p-4 sm:p-6 bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-slate-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="max-w-xs w-full bg-white dark:bg-gray-800 shadow-xl rounded-xl overflow-hidden transform transition duration-300 hover:scale-105 border-b-4 border-emerald-600 dark:border-emerald-500">
<div class="p-6 sm:p-8 space-y-4">
<div class="flex items-center justify-between">
<h3 class="text-lg sm:text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">Current BTC Price</h3>
<svg class="w-6 h-6 text-emerald-600 dark:text-emerald-400" 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.593 1M12 8V4m0 4a8 8 0 100 16m0-16v4"></path>
</svg>
</div>
<p class="text-3xl sm:text-4xl font-extrabold text-emerald-700 dark:text-emerald-300 tracking-tight leading-tight">$45,678.90</p>
<div class="flex items-center justify-between text-sm sm:text-base">
<span class="text-gray-600 dark:text-gray-400">24h Change:</span>
<span class="flex items-center text-red-500 dark:text-red-400 font-semibold">
<svg class="w-4 h-4 mr-1" 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="M13 17l-5-5m0 0l5-5m-5 5h12"></path>
</svg>
-1.23%
</span>
</div>
<div class="border-t border-gray-200 dark:border-gray-700 pt-4 flex justify-between items-center text-xs sm:text-sm text-gray-500 dark:text-gray-400">
<span>Last updated:</span>
<span>Just now</span>
</div>
</div>
</div>
</div>Composants associés
Composants de visualisation de données
Un composant complexe de visualisation des données du tableau de bord avec une esthétique rétro/vintage et des schémas de couleurs complémentaires.
Composants de visualisation de données
Un composant de visualisation de données de style rétro/vintage avec prise en charge du thème sombre et des effets réactifs utilisant Tailwind CSS.
Composants de visualisation de données
Un composant de visualisation de données e-commerce simple et réactif avec un style de conception glassmorphism et une palette de couleurs monochromatiques, avec prise en charge du mode sombre.