Crypto_Blockchain_Cards_Component
암호화폐 및 블록체인 애플리케이션용으로 설계된 반응형 카드 세트로, 따뜻한 중성 색상 구성표, 머티리얼에서 영감을 받은 그림자 및 다크 모드 지원을 특징으로 합니다.
HTML 코드
<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>관련 구성 요소
Neumorphic Cards 컴포넌트
어두운 테마를 지원하는 Neumorphism 스타일로 디자인된 반응형 카드 구성 요소로, 미묘한 그림자와 유연한 레이아웃을 특징으로 합니다.
Luxury_Sepia_SaaS_Cards_Component
럭셔리/프리미엄 디자인 스타일, 세피아/갈색 색 구성표, 기술/SaaS 애플리케이션에 최적화된 복잡하고 반응이 빠른 카드 구성 요소로, 다크 모드 지원 및 대화형 요소를 포함합니다.
카드 구성 요소
반응형 블로그/콘텐츠 카드 구성 요소는 스큐어모픽 스타일과 흙색으로 디자인되었습니다. 제목, 이미지, 간략한 설명 및 작성자 정보에 대한 아바타가 포함됩니다. 다크 모드를 지원합니다.