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 Maps simple avec un design Glassmorphism, une palette de couleurs en niveaux de gris et une mise en page simple. Il est réactif et prend en charge le mode sombre.
Cyberpunk_Gaming_Maps_Component
Un composant de cartes simple et réactif sur le thème du cyberpunk pour les interfaces de jeu, avec des arrière-plans sombres, des accents néon et une palette de couleurs analogue. Inclut la prise en charge du mode sombre.
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.