Skeuomorphic_Crypto_Cards
Un ensemble de cartes réactives et skeuomorphes conçues pour les applications de crypto-monnaie ou de blockchain. Dispose de couleurs pastel, d’ombres et de reflets subtils, et d’une prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-8 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 min-h-screen dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 flex flex-col items-center justify-center font-sans">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-gray-800 mb-10 text-center tracking-tight drop-shadow-lg dark:text-gray-100">
<span class="block">Crypto Portfolio</span>
<span class="block text-2xl sm:text-3xl text-gray-600 dark:text-gray-300 font-medium mt-2">Your Digital Assets</span>
</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full max-w-6xl">
<!-- Card 1: Bitcoin -->
<div class="relative flex flex-col justify-between p-6 rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/80 shadow-[inset_0_1px_0px_rgba(255,255,255,0.7),_0_4px_16px_rgba(0,0,0,0.1),_0_12px_48px_rgba(0,0,0,0.05)] dark:from-gray-700/80 dark:to-gray-800/80 dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.05),_0_4px_16px_rgba(0,0,0,0.4),_0_12px_48px_rgba(0,0,0,0.2)] transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
<div class="absolute inset-0 rounded-3xl border-2 border-white/50 dark:border-gray-600/50 pointer-events-none"></div>
<div class="flex items-center mb-4">
<img src="https://www.picsum.photos/id/60/60" alt="Bitcoin Icon" class="w-16 h-16 rounded-full shadow-lg border-2 border-white dark:border-gray-600 drop-shadow-md">
<h2 class="ml-4 text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">Bitcoin</h2>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">The first and most well-known cryptocurrency.</p>
<div class="grid grid-cols-2 gap-2 text-sm mb-4">
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Price:</span>
<span class="block text-pink-600 dark:text-pink-400 font-bold text-lg">$65,432.10</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Change (24h):</span>
<span class="block text-green-600 dark:text-green-400 font-bold text-lg">+3.15%</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Holdings:</span>
<span class="block text-purple-600 dark:text-purple-400 font-bold text-lg">0.5 BTC</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Value:</span>
<span class="block text-yellow-600 dark:text-yellow-400 font-bold text-lg">$32,716.05</span>
</div>
</div>
<button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold text-white bg-gradient-to-br from-pink-400 to-purple-500 shadow-lg shadow-purple-300/50 dark:shadow-purple-800/50 active:shadow-inner-sm border border-white/50 active:border-white/80 active:from-pink-500 active:to-purple-600 transition-all duration-150 transform active:scale-98 relative overflow-hidden group">
<span class="relative z-10 group-hover:scale-105 transition-transform duration-200">Trade Bitcoin</span>
<span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 group-active:opacity-0 transition-opacity duration-200"></span>
</button>
</div>
<!-- Card 2: Ethereum -->
<div class="relative flex flex-col justify-between p-6 rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/80 shadow-[inset_0_1px_0px_rgba(255,255,255,0.7),_0_4px_16px_rgba(0,0,0,0.1),_0_12px_48px_rgba(0,0,0,0.05)] dark:from-gray-700/80 dark:to-gray-800/80 dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.05),_0_4px_16px_rgba(0,0,0,0.4),_0_12px_48px_rgba(0,0,0,0.2)] transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
<div class="absolute inset-0 rounded-3xl border-2 border-white/50 dark:border-gray-600/50 pointer-events-none"></div>
<div class="flex items-center mb-4">
<img src="https://www.picsum.photos/id/65/60" alt="Ethereum Icon" class="w-16 h-16 rounded-full shadow-lg border-2 border-white dark:border-gray-600 drop-shadow-md">
<h2 class="ml-4 text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">Ethereum</h2>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">The decentralized platform for smart contracts.</p>
<div class="grid grid-cols-2 gap-2 text-sm mb-4">
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Price:</span>
<span class="block text-teal-600 dark:text-teal-400 font-bold text-lg">$3,456.78</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Change (24h):</span>
<span class="block text-red-600 dark:text-red-400 font-bold text-lg">-1.50%</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Holdings:</span>
<span class="block text-purple-600 dark:text-purple-400 font-bold text-lg">3.0 ETH</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Value:</span>
<span class="block text-yellow-600 dark:text-yellow-400 font-bold text-lg">$10,370.34</span>
</div>
</div>
<button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold text-white bg-gradient-to-br from-green-400 to-teal-500 shadow-lg shadow-teal-300/50 dark:shadow-teal-800/50 active:shadow-inner-sm border border-white/50 active:border-white/80 active:from-green-500 active:to-teal-600 transition-all duration-150 transform active:scale-98 relative overflow-hidden group">
<span class="relative z-10 group-hover:scale-105 transition-transform duration-200">Trade Ethereum</span>
<span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 group-active:opacity-0 transition-opacity duration-200"></span>
</button>
</div>
<!-- Card 3: BNB -->
<div class="relative flex flex-col justify-between p-6 rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/80 shadow-[inset_0_1px_0px_rgba(255,255,255,0.7),_0_4px_16px_rgba(0,0,0,0.1),_0_12px_48px_rgba(0,0,0,0.05)] dark:from-gray-700/80 dark:to-gray-800/80 dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.05),_0_4px_16px_rgba(0,0,0,0.4),_0_12px_48px_rgba(0,0,0,0.2)] transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
<div class="absolute inset-0 rounded-3xl border-2 border-white/50 dark:border-gray-600/50 pointer-events-none"></div>
<div class="flex items-center mb-4">
<img src="https://www.picsum.photos/id/70/60" alt="BNB Icon" class="w-16 h-16 rounded-full shadow-lg border-2 border-white dark:border-gray-600 drop-shadow-md">
<h2 class="ml-4 text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">BNB</h2>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">The native cryptocurrency of the Binance Smart Chain.</p>
<div class="grid grid-cols-2 gap-2 text-sm mb-4">
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Price:</span>
<span class="block text-red-600 dark:text-red-400 font-bold text-lg">$589.99</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Change (24h):</span>
<span class="block text-green-600 dark:text-green-400 font-bold text-lg">+0.80%</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Holdings:</span>
<span class="block text-purple-600 dark:text-purple-400 font-bold text-lg">10.0 BNB</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Value:</span>
<span class="block text-yellow-600 dark:text-yellow-400 font-bold text-lg">$5,899.90</span>
</div>
</div>
<button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold text-white bg-gradient-to-br from-blue-400 to-indigo-500 shadow-lg shadow-indigo-300/50 dark:shadow-indigo-800/50 active:shadow-inner-sm border border-white/50 active:border-white/80 active:from-blue-500 active:to-indigo-600 transition-all duration-150 transform active:scale-98 relative overflow-hidden group">
<span class="relative z-10 group-hover:scale-105 transition-transform duration-200">Trade BNB</span>
<span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 group-active:opacity-0 transition-opacity duration-200"></span>
</button>
</div>
</div>
<footer class="mt-12 text-center text-gray-600 dark:text-gray-400 text-sm">
<p>© 2023 Crypto Portfolio. All rights reserved.</p>
</footer>
</div>Composants associés
Composant Cartes
Un composant de carte simple, propre et digne de confiance adapté aux environnements d’affaires d’entreprise/professionnels, spécialement conçu pour les applications de crypto-monnaie et de blockchain. Il dispose d’une palette de couleurs complémentaire, d’un design réactif et d’une prise en charge du mode sombre.
Retro_E_commerce_Cards_Component
Un composant de carte produit e-commerce réactif avec une esthétique rétro/vintage, des tons de terre et une prise en charge du mode sombre, adapté aux expériences d’achat en ligne. Les fonctionnalités incluent l’image du produit, le nom, le prix et un bouton d’appel à l’action.
Cartes sociales en mode sombre
Un composant de carte réactif conçu pour le mode sombre avec des tons de terre, conçu pour les interfaces de médias sociaux.