Dashboard_Component
Un componente de tablero de finanzas/banca receptivo con un estilo de diseño artístico/acuarela y una cálida combinación de colores al atardecer. Incluye soporte para modo oscuro y un nivel de complejidad moderado.
Código HTML
<div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gradient-to-br from-orange-50 to-red-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 md:p-8 min-h-screen">
<!-- Background elements for artistic feel -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-0 left-0 w-64 h-64 bg-red-200 dark:bg-red-900 opacity-30 dark:opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob"></div>
<div class="absolute bottom-1/4 right-1/4 w-72 h-72 bg-orange-200 dark:bg-orange-800 opacity-30 dark:opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000"></div>
<div class="absolute -bottom-10 left-1/3 w-80 h-80 bg-yellow-200 dark:bg-yellow-700 opacity-30 dark:opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000"></div>
</div>
<div class="relative max-w-7xl mx-auto z-10">
<!-- Header -->
<header class="flex flex-col sm:flex-row items-center justify-between py-4 mb-8 bg-white/70 dark:bg-gray-800/70 backdrop-blur-md rounded-xl shadow-lg dark:shadow-xl">
<div class="flex items-center space-x-4 mb-4 sm:mb-0 ml-0 sm:ml-6">
<img src="https://picsum.photos/id/1025/60/60" alt="Bank Logo" class="rounded-full border-2 border-orange-400 dark:border-orange-600 shadow-md">
<h1 class="text-2xl sm:text-3xl font-bold text-red-700 dark:text-red-400 drop-shadow-sm">My Digital Bank</h1>
</div>
<div class="flex items-center space-x-4 mr-0 sm:mr-6">
<button class="p-2 rounded-full hover:bg-orange-100 dark:hover:bg-gray-700 transition-colors duration-200">
<svg class="w-6 h-6 text-orange-600 dark:text-orange-300" 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="M15 17h2a2 2 0 002-2v-2a2 2 0 00-2-2H7a2 2 0 00-2 2v2a2 2 0 002 2h2m0 0V9a2 2 0 012-2h4a2 2 0 012 2v8m-6 0v2m0-4h.01M9 13.01l.01-.01M15 13.01l.01-.01"></path></svg>
</button>
<button class="p-2 rounded-full hover:bg-orange-100 dark:hover:bg-gray-700 transition-colors duration-200">
<svg class="w-6 h-6 text-orange-600 dark:text-orange-300" 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 8h10M7 12h10M7 16h10M4 20h16a2 2 0 002-2V6a2 2 0 00-2-2H4a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
</button>
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-orange-400 dark:border-orange-600 shadow-md">
</div>
</header>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Left Column: Balance & Transactions -->
<div class="md:col-span-2 space-y-6">
<!-- Current Balance Card -->
<div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-md rounded-xl p-6 shadow-lg dark:shadow-xl border border-orange-200 dark:border-gray-700 transform hover:scale-[1.01] transition-transform duration-300 ease-in-out">
<h2 class="text-xl font-semibold text-red-600 dark:text-red-300 mb-4">Current Balance</h2>
<div class="flex items-center justify-between mb-6">
<div>
<p class="text-4xl font-bold text-red-700 dark:text-red-400 drop-shadow-sm">$12,450<sup class="text-xl font-normal text-red-500 dark:text-red-400">.89</sup></p>
<p class="text-sm text-gray-600 dark:text-gray-400">Available Funds</p>
</div>
<button class="px-6 py-3 bg-gradient-to-br from-orange-500 to-red-600 text-white rounded-full shadow-lg hover:from-orange-600 hover:to-red-700 transition-all duration-300 transform hover:-translate-y-0.5">
Deposit Funds
</button>
</div>
<div class="grid grid-cols-2 gap-4 text-sm text-gray-700 dark:text-gray-300">
<div>
<p class="font-medium">Savings Account:</p>
<p class="text-green-600 dark:text-green-400 font-bold">$8,200.00</p>
</div>
<div>
<p class="font-medium">Checking Account:</p>
<p class="text-green-600 dark:text-green-400 font-bold">$4,250.89</p>
</div>
</div>
</div>
<!-- Recent Transactions -->
<div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-md rounded-xl p-6 shadow-lg dark:shadow-xl border border-orange-200 dark:border-gray-700">
<h2 class="text-xl font-semibold text-red-600 dark:text-red-300 mb-4">Recent Transactions</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-orange-200 dark:divide-gray-700">
<thead class="bg-orange-50/50 dark:bg-gray-700/50">
<tr>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider rounded-tl-md">Description</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Date</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Category</th>
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider rounded-tr-md">Amount</th>
</tr>
</thead>
<tbody class="bg-white/50 dark:bg-gray-800/50 divide-y divide-orange-100 dark:divide-gray-700">
<tr class="hover:bg-orange-50 dark:hover:bg-gray-700 transition-colors duration-150">
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-200">Online Food Delivery</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Oct 26, 2023</td>
<td class="px-4 py-3 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">Food</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-right text-sm text-red-600 dark:text-red-400">-$25.50</td>
</tr>
<tr class="hover:bg-orange-50 dark:hover:bg-gray-700 transition-colors duration-150">
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-200">Salary Deposit</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Oct 25, 2023</td>
<td class="px-4 py-3 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Income</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-right text-sm text-green-600 dark:text-green-400">+$3,500.00</td>
</tr>
<tr class="hover:bg-orange-50 dark:hover:bg-gray-700 transition-colors duration-150">
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-200">Monthly Subscription</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Oct 24, 2023</td>
<td class="px-4 py-3 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100">Subscription</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-right text-sm text-red-600 dark:text-red-400">-$12.99</td>
</tr>
<tr class="hover:bg-orange-50 dark:hover:bg-gray-700 transition-colors duration-150">
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-200">Coffee Shop</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Oct 24, 2023</td>
<td class="px-4 py-3 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">Dining</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-right text-sm text-red-600 dark:text-red-400">-$5.75</td>
</tr>
</tbody>
</table>
</div>
<button class="mt-4 w-full text-center py-2 text-sm font-medium text-orange-600 dark:text-orange-300 hover:text-orange-800 dark:hover:text-orange-100 transition-colors duration-200">
View All Transactions
</button>
</div>
</div>
<!-- Right Column: Quick Actions & News -->
<div class="space-y-6">
<!-- Quick Actions -->
<div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-md rounded-xl p-6 shadow-lg dark:shadow-xl border border-orange-200 dark:border-gray-700">
<h2 class="text-xl font-semibold text-red-600 dark:text-red-300 mb-4">Quick Actions</h2>
<div class="grid grid-cols-2 gap-4">
<button class="flex flex-col items-center p-4 rounded-xl bg-orange-50 dark:bg-gray-700 hover:bg-orange-100 dark:hover:bg-gray-600 transition-colors duration-200 shadow-sm">
<svg class="w-8 h-8 text-orange-600 dark:text-orange-300 mb-2" 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 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002 12c0 2.755 4.29 5.233 10 5.233S22 14.755 22 12A12.001 12.001 0 0018.618 7.984z"></path></svg>
<span class="text-sm font-medium text-gray-800 dark:text-gray-200">Pay Bills</span>
</button>
<button class="flex flex-col items-center p-4 rounded-xl bg-orange-50 dark:bg-gray-700 hover:bg-orange-100 dark:hover:bg-gray-600 transition-colors duration-200 shadow-sm">
<svg class="w-8 h-8 text-orange-600 dark:text-orange-300 mb-2" 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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
<span class="text-sm font-medium text-gray-800 dark:text-gray-200">Transfer</span>
</button>
<button class="flex flex-col items-center p-4 rounded-xl bg-orange-50 dark:bg-gray-700 hover:bg-orange-100 dark:hover:bg-gray-600 transition-colors duration-200 shadow-sm">
<svg class="w-8 h-8 text-orange-600 dark:text-orange-300 mb-2" 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="M3 10h18M7 15h10m-9 4h8a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
<span class="text-sm font-medium text-gray-800 dark:text-gray-200">Cards</span>
</button>
<button class="flex flex-col items-center p-4 rounded-xl bg-orange-50 dark:bg-gray-700 hover:bg-orange-100 dark:hover:bg-gray-600 transition-colors duration-200 shadow-sm">
<svg class="w-8 h-8 text-orange-600 dark:text-orange-300 mb-2" 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.593 1L21 12h-3.819c-.58-3.056-4.9-5-10.181-5H3c.695 0 1.37.199 2 .591V12h3.819c.58 3.056 4.9 5 10.181 5H21a9.998 9.998 0 00-4-2c-1.11 0-2.08-.402-2.593-1L3 12h3.819"></path></svg>
<span class="text-sm font-medium text-gray-800 dark:text-gray-200">Invest</span>
</button>
</div>
</div>
<!-- Financial Insights / News -->
<div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-md rounded-xl p-6 shadow-lg dark:shadow-xl border border-orange-200 dark:border-gray-700">
<h2 class="text-xl font-semibold text-red-600 dark:text-red-300 mb-4">Financial Insights</h2>
<div class="space-y-4">
<div class="flex space-x-4 bg-orange-50 dark:bg-gray-700 p-3 rounded-lg shadow-sm">
<img src="https://picsum.photos/id/403/80/60" alt="News thumbnail" class="w-20 h-15 rounded-md object-cover border border-orange-100 dark:border-gray-600">
<div>
<h3 class="text-sm font-medium text-gray-900 dark:text-gray-200 leading-tight mb-0.5">Tips for Saving on Daily Expenses</h3>
<p class="text-xs text-gray-600 dark:text-gray-400">Learn how small changes can lead to big savings by year-end.</p>
</div>
</div>
<div class="flex space-x-4 bg-orange-50 dark:bg-gray-700 p-3 rounded-lg shadow-sm">
<img src="https://picsum.photos/id/405/80/60" alt="News thumbnail" class="w-20 h-15 rounded-md object-cover border border-orange-100 dark:border-gray-600">
<div>
<h3 class="text-sm font-medium text-gray-900 dark:text-gray-200 leading-tight mb-0.5">Understanding Your Credit Score</h3>
<p class="text-xs text-gray-600 dark:text-gray-400">A comprehensive guide to improving and maintaining a good credit score.</p>
</div>
</div>
<div class="flex space-x-4 bg-orange-50 dark:bg-gray-700 p-3 rounded-lg shadow-sm">
<img src="https://picsum.photos/id/400/80/60" alt="News thumbnail" class="w-20 h-15 rounded-md object-cover border border-orange-100 dark:border-gray-600">
<div>
<h3 class="text-sm font-medium text-gray-900 dark:text-gray-200 leading-tight mb-0.5">Market Trends for Q4 2023</h3>
<p class="text-xs text-gray-600 dark:text-gray-400">An overview of the current investment landscape and future predictions.</p>
</div>
</div>
</div>
<button class="mt-4 w-full text-center py-2 text-sm font-medium text-orange-600 dark:text-orange-300 hover:text-orange-800 dark:hover:text-orange-100 transition-colors duration-200">
Browse All Insights
</button>
</div>
</div>
</div>
<!-- Footer (optional, simple for now) -->
<footer class="text-center mt-10 text-gray-600 dark:text-gray-400 text-sm">
<p>© 2023 My Digital Bank. All rights reserved.</p>
<p class="mt-1"><a href="#" class="hover:underline text-orange-600 dark:text-orange-400">Privacy Policy</a> | <a href="#" class="hover:underline text-orange-600 dark:text-orange-400">Terms of Service</a></p>
</footer>
</div>
</div>
<style>
/* Base for blobs, adjust as needed */
@keyframes animateBlob {
0% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30vw, -20vh) scale(1.1); }
66% { transform: translate(-20vw, 15vh) scale(0.9); }
100% { transform: translate(0, 0) scale(1); }
}
.animate-blob {
animation: animateBlob 7s infinite alternate;
}
/* Delay different blobs to create a more dynamic flow */
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
</style>Componentes relacionados
Dashboard_Agriculture_ForestGreen_Luxury
Un componente de tablero complejo con temática de lujo diseñado para sitios web de agricultura y ganadería, con una elegante paleta de colores bosque/verde y una capacidad de respuesta total con soporte para modo oscuro.
Dashboard_Weather_Climate_Swiss
Un componente de tablero de clima y tiempo complejo y sensible inspirado en la tipografía suiza/internacional, que utiliza tonos tierra y admite el modo oscuro. Cuenta con múltiples puntos de datos como el tiempo actual, el pronóstico, la calidad del aire y las tendencias climáticas.
Componente Paneles
Un componente de tablero complejo diseñado para el modo oscuro con un esquema de color monocromático para uso empresarial/corporativo. Cuenta con elementos interactivos enriquecidos y es responsivo.