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
Luxury_Sepia_SaaS_Cards_Component
Un composant de cartes complexe et réactif avec un style de design luxueux/premium, une palette de couleurs sépia/marron, optimisé pour les applications technologiques/SaaS, y compris la prise en charge du mode sombre et des éléments interactifs.
Composant des cartes météo Bauhaus
Un composant simple et réactif des cartes météo/climat inspiré des principes de conception du Bauhaus, avec des formes géométriques et une palette de couleurs triadique. Inclut la prise en charge du mode sombre.
Carte de conception matérielle
Composant de carte de style Material Design avec un comportement réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Caractéristiques repères visuels d’élévation et d’ondulation.