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>관련 구성 요소
Neumorphic Cards 컴포넌트
어두운 테마를 지원하는 Neumorphism 스타일로 디자인된 반응형 카드 구성 요소로, 미묘한 그림자와 유연한 레이아웃을 특징으로 합니다.
Luxury_Portfolio_Cards_Ocean_Blue
복잡한 럭셔리/프리미엄 포트폴리오 카드 구성 요소로, 작품이나 제품을 선보이기 위해 바다/블루 톤으로 디자인되었습니다. 반응형 디자인, 세련된 타이포그래피, 우아한 비주얼, 완전한 다크 모드 지원이 특징입니다.
Forum_Community_Cards_Component
포럼 또는 커뮤니티 플랫폼을 위한 반응형 대화형 카드 구성 요소로, 레트로/빈티지 색 구성표와 미묘한 상호 작용을 위한 미묘한 호버 효과를 특징으로 합니다. 다크 모드 지원 및 시맨틱 HTML이 포함됩니다.