Composant de carte de tableau de bord brutaliste
Un composant de carte de tableau de bord de style brutaliste avec des couleurs vives, un contraste élevé, des éléments interactifs complexes, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="bg-yellow-300 dark:bg-purple-900 text-gray-900 dark:text-gray-100 min-h-screen p-8 font-mono">
<div class="container mx-auto">
<h1 class="text-4xl font-bold mb-8 border-b-4 border-red-500 pb-2">Dashboard Overview</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Map Section -->
<div class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
<h2 class="text-2xl font-bold mb-4 border-b-2 border-blue-500 pb-2">Geographical Data</h2>
<div class="h-64 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">
[Interactive Map Placeholder]
</div>
<div class="mt-4 grid grid-cols-2 gap-4">
<div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
<h3 class="font-bold mb-2">Metric A</h3>
<p class="text-xl text-green-600 dark:text-green-400">1,245</p>
</div>
<div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
<h3 class="font-bold mb-2">Metric B</h3>
<p class="text-xl text-red-600 dark:text-red-400">489</p>
</div>
</div>
</div>
<!-- Data Visualization Section -->
<div class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
<h2 class="text-2xl font-bold mb-4 border-b-2 border-purple-500 pb-2">Key Metrics</h2>
<div class="space-y-4">
<div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
<h3 class="font-bold mb-2">Sales Performance</h3>
<div class="h-24 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">[Chart Placeholder]</div>
</div>
<div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
<h3 class="font-bold mb-2">User Engagement</h3>
<div class="h-24 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">[Chart Placeholder]</div>
</div>
</div>
</div>
</div>
<!-- Table Section -->
<div class="mt-8 bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
<h2 class="text-2xl font-bold mb-4 border-b-2 border-orange-500 pb-2">Recent Activity</h2>
<table class="min-w-full border-collapse border border-black dark:border-lime-400">
<thead>
<tr>
<th class="border border-black dark:border-lime-400 p-2 text-left">User</th>
<th class="border border-black dark:border-lime-400 p-2 text-left">Action</th>
<th class="border border-black dark:border-lime-400 p-2 text-left">Timestamp</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-black dark:border-lime-400 p-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-black dark:border-lime-400">
<span>John Doe</span>
</td>
<td class="border border-black dark:border-lime-400 p-2">Viewed Report</td>
<td class="border border-black dark:border-lime-400 p-2">2023-10-27 10:30</td>
</tr>
<tr>
<td class="border border-black dark:border-lime-400 p-2 flex items-center">
<img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-black dark:border-lime-400">
<span>Jane Smith</span>
</td>
<td class="border border-black dark:border-lime-400 p-2">Updated Dashboard</td>
<td class="border border-black dark:border-lime-400 p-2">2023-10-27 10:45</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>Composants associés
Composant Cartes
Un composant réactif de type carte conçu pour les plates-formes éducatives, avec des éléments interactifs et des couleurs pastel douces avec prise en charge du mode sombre. Se concentre sur les micro-interactions telles que les survols subtils et les états actifs.
Luxury_Autumn_Maps_Component
Un composant de carte réactif et élégant conçu pour les sites Web de voyage et de tourisme de luxe, avec des couleurs d’automne et une prise en charge du mode sombre.
Composant Retro Maps
Un composant de cartes simple, réactif et compatible avec le mode sombre, avec une esthétique rétro/vintage, une palette de couleurs vives et un objectif professionnel/d’entreprise, construit avec Tailwind CSS.