FinancialGridWithInteractions
Un componente di layout a griglia reattivo per interfacce finanziarie/bancarie, caratterizzato da colori ad alto contrasto e sottili microinterazioni al passaggio del mouse. Supporta la modalità oscura ed è progettato per una complessità moderata.
Codice 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>Componenti correlati
Monospace_Developer_Food_Grid_Layout
Un semplice componente di layout a griglia a tema monospazio per siti Web di cibo/ristoranti, caratterizzato da un design pulito e una combinazione di colori monocromatica con supporto per la modalità scura.
Layout della griglia di gioco Art Déco
Un layout reattivo della griglia di gioco ispirato all'Art Déco con motivi geometrici, colori in scala di grigi ed elementi interattivi. Progettato per siti Web e interfacce di gioco, con supporto per la modalità oscura.
Griglia del cruscotto del neumorfismo
Componente dashboard del layout della griglia di neumorfismo con combinazione di colori complementari