Crypto_Blockchain_Cards_Component
Un ensemble de cartes réactives conçues pour les applications de crypto-monnaie et de blockchain, avec une palette de couleurs neutres chaudes, des ombres inspirées des matériaux et la prise en charge du mode sombre.
HTML Code
<div class="bg-stone-50 dark:bg-stone-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
<!-- Card 1: Asset Overview -->
<div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden perspective group">
<div class="p-6 relative z-10">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100">Bitcoin (BTC)</h3>
<span class="text-stone-500 dark:text-stone-400 text-sm">Your Balance</span>
</div>
<div class="flex items-center space-x-3 mb-2">
<img class="w-8 h-8 rounded-full shadow-md" src="https://picsum.photos/id/1043/40/40" alt="Bitcoin Logo">
<p class="text-3xl font-bold text-stone-900 dark:text-stone-50">0.05 BTC</p>
</div>
<p class="text-stone-600 dark:text-stone-300 text-lg mb-6">$ 3,450.78 <span class="text-emerald-600 dark:text-emerald-400 text-base font-semibold">+1.2%</span></p>
<div class="flex justify-between items-center text-sm">
<span class="text-stone-500 dark:text-stone-400">24h Change:</span>
<span class="text-emerald-600 dark:text-emerald-400 font-medium">+ $45.21</span>
</div>
<div class="flex justify-end mt-4">
<button class="px-4 py-2 bg-amber-600 text-white rounded-md shadow-md hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Card 2: Recent Transactions -->
<div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden perspective group">
<div class="p-6 relative z-10">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Recent Transactions</h3>
<ul class="space-y-4">
<li class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="bg-emerald-100 dark:bg-emerald-900 p-2 rounded-full">
<svg class="w-5 h-5 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="M7 11c.902-1.705 2.128-3.037 3.551-4L15 8l-3 4m0 0l3 4m-3-4c-1.423.963-2.649 2.295-3.551 4"></path></svg>
</div>
<div>
<p class="text-stone-800 dark:text-stone-100 font-medium">Received ETH</p>
<p class="text-stone-500 dark:text-stone-400 text-sm">From: 0x...abc</p>
</div>
</div>
<span class="text-emerald-600 dark:text-emerald-400 font-semibold">+0.15 ETH</span>
</li>
<li class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="bg-rose-100 dark:bg-rose-900 p-2 rounded-full">
<svg class="w-5 h-5 text-rose-600 dark:text-rose-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="M17 13l-5 5m0 0l-5-5m5 5V6"></path></svg>
</div>
<div>
<p class="text-stone-800 dark:text-stone-100 font-medium">Sent BTC</p>
<p class="text-stone-500 dark:text-stone-400 text-sm">To: 0x...def</p>
</div>
</div>
<span class="text-rose-600 dark:text-rose-400 font-semibold">-0.002 BTC</span>
</li>
<li class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-full">
<svg class="w-5 h-5 text-blue-600 dark:text-blue-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="M9 7h6m-3 2v4m-3 3h6m-3-6h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div>
<p class="text-stone-800 dark:text-stone-100 font-medium">Staked ADA</p>
<p class="text-stone-500 dark:text-stone-400 text-sm">Pool: CardanoStake</p>
</div>
</div>
<span class="text-blue-600 dark:text-blue-400 font-semibold">+50 ADA</span>
</li>
</ul>
<div class="flex justify-end mt-4">
<button class="px-4 py-2 border border-stone-300 dark:border-stone-600 text-stone-700 dark:text-stone-300 rounded-md hover:bg-stone-100 dark:hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-75 transition duration-200">
View All
</button>
</div>
</div>
</div>
<!-- Card 3: Blockchain News / Updates -->
<div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden perspective group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/29/600/400" alt="Blockchain News">
<div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent opacity-75"></div>
<div class="absolute bottom-0 left-0 p-4 w-full">
<span class="text-xs font-semibold text-stone-200 dark:text-stone-400 uppercase tracking-wide">News</span>
<h3 class="text-lg font-semibold text-white dark:text-stone-50 leading-tight">Ethereum 'Merge' Success: A New Era for Crypto</h3>
</div>
</div>
<div class="p-6 relative z-10">
<p class="text-stone-700 dark:text-stone-300 mb-4 text-sm leading-relaxed">The highly anticipated Ethereum 'Merge' has been successfully completed, transitioning the network to Proof-of-Stake. This marks a significant milestone...</p>
<div class="flex items-center justify-between text-xs text-stone-500 dark:text-stone-400">
<span>September 15, 2023</span>
<a href="#" class="text-amber-600 hover:underline dark:text-amber-500">Read more</a>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant de cartes neumorphes
Un composant de cartes réactives conçu dans le style Neumorphism avec prise en charge du thème sombre, avec des ombres subtiles et une mise en page flexible.
Carte e-commerce
Composant de carte de commerce électronique réactif avec prise en charge du mode sombre à l’aide des principes Tailwind CSS et Material Design. Dispose d’une palette de couleurs vives avec une complexité modérée, y compris des éléments interactifs tels que des boutons et des effets de survol. Utilise une mise en page basée sur une grille et intègre des ombres pour plus de profondeur.
Composant Cartes
Un composant de cartes complexe conçu pour le mode sombre, adapté à la consommation de blogs et de contenu avec une palette de couleurs triadique.