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 de cartes complexe conçu dans le style Material Design, adapté aux tableaux de bord. Il intègre des éléments réactifs, des fonctionnalités interactives et prend en charge l’esthétique du mode sombre à l’aide d’un schéma de couleurs analogue.
Composant Cartes
Composant Maps avec conception Skeuomorphism, schéma de couleurs triadique, complexité modérée et objectif de médias sociaux. Conception réactive avec prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Cartes
Un composant de cartes réactives de style neumorphisme, prenant en charge le thème sombre et présentant des images de remplacement.