Dashboard_Component
Un composant de tableau de bord financier/bancaire réactif avec un style de conception aquarelle/artistique et une palette de couleurs chaudes au coucher du soleil. Inclut la prise en charge du mode sombre et un niveau de complexité modéré.
HTML Code
<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>Composants associés
Composant Tableaux de bord
Un composant de tableaux de bord réactifs pour les applications de médias sociaux avec des micro-interactions et un schéma de couleurs triadique, construit à l’aide de Tailwind CSS.
Brutalist_Dating_Dashboard
Un composant de tableau de bord de style brutaliste pour les plateformes de rencontres et les réseaux sociaux, avec un design audacieux, un contraste élevé et une palette de couleurs violet/violet. Réactif avec prise en charge du mode sombre.
Tableau de bord social Art Déco
Un composant de tableau de bord de complexité modérée pour les plateformes de rencontres/sociales, avec un style de design Art déco avec des couleurs sourdes/désaturées et une réactivité totale. Comprend des cartes de profil, un flux d’activité et une navigation, avec prise en charge du mode sombre.