Skeuomorphic_Crypto_Cards
암호화폐 또는 블록체인 애플리케이션을 위해 설계된 반응형 스큐어모픽 카드 세트입니다. 파스텔 색상, 미묘한 그림자 및 하이라이트, 다크 모드 지원이 특징입니다.
HTML 코드
<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>관련 구성 요소
3D 카드 구성 요소
3D 디자인 스타일, 생생한 색상, 대시보드에 적합한 여러 대화형 요소가 있는 반응형 카드 구성 요소입니다. Tailwind의 다크 프리픽스를 사용하여 다크 모드를 지원합니다.
머티리얼 디자인 카드
Tailwind CSS를 사용하여 반응형 동작과 다크 모드를 지원하는 머티리얼 디자인 스타일의 카드 구성 요소입니다. 고도 및 파급 효과, 시각적 단서가 특징입니다.
레트로예약카드
다크 모드를 지원하는 반응형 레트로 테마 예약/예약 카드 세트로, 예약 또는 예약 시스템에 적합합니다. 차분한 빈티지 색상과 미묘한 80/90년대 미학이 특징입니다.