Crypto_Blockchain_Cards_Component
A set of responsive cards designed for cryptocurrency and blockchain applications, featuring a warm neutral color scheme, Material-inspired shadows, and dark mode support.
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>Related Components
Cards Component
A minimalist and flat design cards component for booking/reservation systems, featuring a gradient rainbow color scheme. It's responsive, includes dark mode support, and uses simple elements for a clean look.
Cards Component
A responsive portfolio card component with a brutalist design style, utilizing a pastel color scheme and moderate complexity with interactive features. This card showcases work or products and supports dark mode.
Material Design Card
A Material Design-styled card component with responsive behavior and dark mode support using Tailwind CSS. Features elevation and ripple effects visual cues.