FinancialGridWithInteractions (영어)
금융/은행 인터페이스를 위한 반응형 그리드 레이아웃 구성 요소로, 고대비 색상과 미묘한 호버 마이크로 상호 작용을 특징으로 합니다. 다크 모드를 지원하며 중간 정도의 복잡성을 위해 설계되었습니다.
HTML 코드
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-8 text-center">
Your Financial Overview
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Card 1: Account Balance -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-indigo-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="p-6 relative z-10">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Current Balance</h3>
<span class="text-sm font-medium text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors duration-300">View Details</span>
</div>
<p class="text-4xl font-bold text-blue-900 dark:text-blue-500 mb-2 group-hover:scale-105 transition-transform duration-300 origin-left">$12,345.67</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Last updated: Oct 26, 2023</p>
<div class="mt-4 flex items-center">
<svg class="w-5 h-5 text-green-500 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="text-xs text-gray-600 dark:text-gray-300">All accounts in good standing</span>
</div>
</div>
</div>
<!-- Card 2: Recent Transactions -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-purple-600 to-pink-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="p-6 relative z-10">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">Recent Transactions</h3>
<ul class="space-y-3">
<li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
<span>Starbucks Inc.</span>
<span class="font-medium text-red-500 dark:text-red-400">-$5.25</span>
</li>
<li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
<span>Payroll Deposit</span>
<span class="font-medium text-green-500 dark:text-green-400">+$2,100.00</span>
</li>
<li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
<span>Amazon.com</span>
<span class="font-medium text-red-500 dark:text-red-400">-$45.99</span>
</li>
<li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
<span>Monthly Subscription</span>
<span class="font-medium text-red-500 dark:text-red-400">-$12.99</span>
</li>
</ul>
<a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium hover:underline hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200">
See all <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Card 3: Savings Goals -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-green-600 to-teal-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="p-6 relative z-10">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">Savings Goals</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-sm text-gray-700 dark:text-gray-300">New Car</span>
<span class="text-sm font-medium text-blue-600 dark:text-blue-400">45%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
<div class="bg-blue-500 h-2 rounded-full transition-all duration-500 ease-out group-hover:w-[45%]" style="width: 25%;"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-sm text-gray-700 dark:text-gray-300">Down Payment</span>
<span class="text-sm font-medium text-green-600 dark:text-green-400">78%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
<div class="bg-green-500 h-2 rounded-full transition-all duration-500 ease-out group-hover:w-[78%]" style="width: 50%;"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-sm text-gray-700 dark:text-gray-300">Emergency Fund</span>
<span class="text-sm font-medium text-yellow-600 dark:text-yellow-400">60%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
<div class="bg-yellow-500 h-2 rounded-full transition-all duration-500 ease-out group-hover:w-[60%]" style="width: 30%;"></div>
</div>
</div>
</div>
<button class="mt-6 w-full py-2 px-4 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-300 transform hover:scale-105">
Add New Goal
</button>
</div>
</div>
<!-- Card 4: Upcoming Bills -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden md:col-span-1 lg:col-span-1">
<div class="absolute inset-0 bg-gradient-to-br from-red-600 to-orange-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="p-6 relative z-10">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">Upcoming Bills</h3>
<ul class="space-y-3">
<li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
<span>Netflix</span>
<span class="font-medium text-red-500 dark:text-red-400">$19.99 <span class="text-xs text-gray-500 dark:text-gray-400">(Nov 1)</span></span>
</li>
<li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
<span>Electricity</span>
<span class="font-medium text-red-500 dark:text-red-400">$85.50 <span class="text-xs text-gray-500 dark:text-gray-400">(Nov 5)</span></span>
</li>
<li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
<span>Credit Card Statement</span>
<span class="font-medium text-red-500 dark:text-red-400">$250.00 <span class="text-xs text-gray-500 dark:text-gray-400">(Nov 10)</span></span>
</li>
</ul>
<button class="mt-6 w-full py-2 px-4 rounded-lg bg-orange-600 text-white font-semibold hover:bg-orange-700 dark:bg-orange-700 dark:hover:bg-orange-600 transition-colors duration-300 transform hover:scale-105">
Pay All Bills
</button>
</div>
</div>
<!-- Card 5: Investment Portfolio (Larger card) -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden md:col-span-2 lg:col-span-2">
<div class="absolute inset-0 bg-gradient-to-br from-sky-600 to-cyan-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="p-6 relative z-10">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">Investment Portfolio</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<p class="text-2xl font-bold text-sky-900 dark:text-sky-500 group-hover:scale-105 transition-transform duration-300 origin-left">$56,789.00</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Total Value</p>
</div>
<div class="text-right">
<p class="text-xl font-semibold text-green-600 dark:text-green-400 group-hover:scale-105 transition-transform duration-300 origin-right">+1.25%</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Today's Change</p>
</div>
</div>
<div class="mt-6 grid grid-cols-2 lg:grid-cols-4 gap-4 text-center">
<div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg group-hover:scale-105 transition-transform duration-200">
<p class="text-base font-semibold text-gray-800 dark:text-gray-100">AAPL</p>
<p class="text-sm text-gray-600 dark:text-gray-400">150 shares</p>
<p class="text-green-500 text-xs">+0.8%</p>
</div>
<div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg group-hover:scale-105 transition-transform duration-200">
<p class="text-base font-semibold text-gray-800 dark:text-gray-100">MSFT</p>
<p class="text-sm text-gray-600 dark:text-gray-400">75 shares</p>
<p class="text-red-500 text-xs">-0.2%</p>
</div>
<div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg group-hover:scale-105 transition-transform duration-200">
<p class="text-base font-semibold text-gray-800 dark:text-gray-100">GOOG</p>
<p class="text-sm text-gray-600 dark:text-gray-400">20 shares</p>
<p class="text-green-500 text-xs">+1.5%</p>
</div>
<div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg group-hover:scale-105 transition-transform duration-200">
<p class="text-base font-semibold text-gray-800 dark:text-gray-100">TSLA</p>
<p class="text-sm text-gray-600 dark:text-gray-400">30 shares</p>
<p class="text-green-500 text-xs">+2.1%</p>
</div>
</div>
<a href="#" class="mt-6 inline-flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium hover:underline hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200">
Manage Portfolio <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
사이버펑크 CRM 그리드
사이버펑크-미래주의적 네온 미학을 가진 CRM/비즈니스 도구를 위한 반응형 그리드 레이아웃 구성 요소로, 어두운 배경과 따뜻한 일몰 악센트 색상을 특징으로 합니다. 대화형 요소와 다크 모드 지원이 포함됩니다.
그리드 레이아웃 구성 요소 29
고대비와 특이한 레이아웃으로 브루탈리즘 스타일로 설계된 반응형 그리드 레이아웃 구성 요소로, Tailwind CSS로 다크 모드를 지원합니다.
그리드 레이아웃 구성 요소 - 금융/뱅킹
금융/은행 애플리케이션을 위한 반응형 그리드 레이아웃 구성 요소로, 웜 뉴트럴 및 다크 모드 지원과 함께 깔끔한 Material Design 미학을 특징으로 합니다.