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
Luxury_Premium_Grayscale_Dating_Social_Data_Visualization_Component
Un composant de visualisation de données élégant et sophistiqué conçu pour les plateformes de rencontres et les réseaux sociaux, avec une palette de couleurs en niveaux de gris et une mise en page réactive avec prise en charge du mode sombre. Affiche les statistiques des utilisateurs et les mesures de connexion.
Composant Composants de visualisation de données
Un composant simple de visualisation de données conçu pour le commerce électronique, doté d’une interface en mode sombre avec des couleurs vives.
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.