Composant de conteneur (tableau de bord, 'tableau de bord')
Composant de conteneur réactif avec prise en charge du thème sombre, conçu pour les tableaux de bord avec des micro-interactions et un jeu de couleurs analogue.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="max-w-7xl mx-auto">
<!-- Header/Navigation Placeholder -->
<header class="flex justify-between items-center py-4 px-6 bg-white dark:bg-gray-800 rounded-lg shadow mb-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Dashboard Overview</h1>
<nav>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Home</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Analytics</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Settings</a></li>
</ul>
</nav>
</header>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1: Sales Overview -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Sales Overview</h2>
<span class="text-green-500 dark:text-green-400 text-sm font-medium">+12%</span>
</div>
<p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-2">$12,345</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Total sales this month</p>
<div class="mt-4 h-24 bg-gradient-to-r from-blue-300 to-blue-500 dark:from-blue-600 dark:to-blue-800 rounded"></div>
</div>
<!-- Card 2: User Activity -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">User Activity</h2>
<span class="text-yellow-500 dark:text-yellow-400 text-sm font-medium">85% Engaged</span>
</div>
<div class="flex items-center space-x-3 mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<p class="text-2xl font-bold text-gray-900 dark:text-gray-50">1,234</p>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm">Active users today</p>
<div class="mt-4 grid grid-cols-5 gap-2">
<div class="h-8 bg-purple-300 dark:bg-purple-600 rounded"></div>
<div class="h-8 bg-purple-400 dark:bg-purple-700 rounded"></div>
<div class="h-8 bg-purple-500 dark:bg-purple-800 rounded"></div>
<div class="h-8 bg-purple-400 dark:bg-purple-700 rounded"></div>
<div class="h-8 bg-purple-300 dark:bg-purple-600 rounded"></div>
</div>
</div>
<!-- Card 3: Traffic Sources -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Traffic Sources</h2>
<span class="text-red-500 dark:text-red-400 text-sm font-medium">Geo-targeted</span>
</div>
<ul class="space-y-2 mb-4">
<li class="flex justify-between text-gray-700 dark:text-gray-300">
<span>Direct</span>
<span class="font-semibold">30%</span>
</li>
<li class="flex justify-between text-gray-700 dark:text-gray-300">
<span>Referral</span>
<span class="font-semibold">25%</span>
</li>
<li class="flex justify-between text-gray-700 dark:text-gray-300">
<span>Organic Search</span>
<span class="font-semibold">45%</span>
</li>
</ul>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div class="bg-indigo-500 h-2 rounded-full" style="width: 45%;"></div>
</div>
</div>
<!-- Card 4: Recent Orders (Full Width on Small Screens) -->
<div class="md:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Recent Orders</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Order ID</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Customer</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Amount</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#ORD001</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Alice Smith</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">$199.99</td>
<td class="px-6 py-4 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">
Completed
</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#ORD002</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Bob Johnson</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">$89.50</td>
<td class="px-6 py-4 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">
Pending
</span>
</td>
</tr>
<!-- More rows... -->
</tbody>
</table>
</div>
</div>
<!-- Card 5: Quick Stats (Image Placeholder) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col items-center justify-center text-center transform transition-transform duration-200 hover:scale-105 active:scale-95">
<img class="w-32 h-32 object-cover rounded-full mb-4 ring-2 ring-blue-400 dark:ring-blue-600" src="https://picsum.photos/256/256?random=1" alt="Placeholder Image">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Project Progress</h2>
<p class="text-4xl font-bold text-blue-600 dark:text-blue-400">75%</p>
<p class="text-gray-600 dark:text-gray-400 text-sm mt-1">Completed tasks</p>
</div>
</div>
<!-- Footer Placeholder -->
<footer class="mt-6 py-4 text-center text-gray-600 dark:text-gray-400 text-sm">
© 2023 Dashboard Inc. All rights reserved.
</footer>
</div>
</div>Composants associés
Composant de conteneur
Un composant de conteneur de portefeuille skeuomorphe avec un thème sombre et un design réactif, présentant le travail et les produits avec des éléments interactifs.
Fiche produit e-commerce Neumorphic
Une fiche produit e-commerce simple et réactive avec un style de conception neumorphique en niveaux de gris, avec prise en charge du mode sombre.
Composant de conteneur
Un composant de conteneur de style 3D adapté aux sites Web d’entreprise, avec des couleurs vives et des éléments interactifs, ainsi qu’un design réactif avec prise en charge du thème sombre.