Composant de tableau de bord brutaliste en niveaux de gris
Une disposition de tableau de bord simple, de style brutaliste, en niveaux de gris pour les sites Web d’entreprise, réactive avec prise en charge du mode sombre, construite avec Tailwind CSS.
HTML Code
<section class="dashboard-component bg-white dark:bg-gray-900 text-black dark:text-white p-8 border-4 border-black dark:border-white">
<div class="max-w-7xl mx-auto">
<!-- Banner -->
<div class="mb-8 border-4 border-black dark:border-white">
<img src="https://picsum.photos/1200/200" alt="Dashboard Banner" class="w-full h-40 object-cover">
</div>
<!-- Header -->
<div class="flex items-center justify-between mb-8">
<h1 class="text-3xl font-extrabold">Company Dashboard</h1>
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-black dark:border-white">
</div>
<!-- Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
<h2 class="text-xl font-bold mb-2">Total Sales</h2>
<p class="text-2xl">67,890</p>
</div>
<div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
<h2 class="text-xl font-bold mb-2">New Users</h2>
<p class="text-2xl">1,234</p>
</div>
<div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
<h2 class="text-xl font-bold mb-2">Performance</h2>
<p class="text-2xl">78%</p>
</div>
</div>
</div>
</section>Composants associés
Composant Tableaux de bord
Un composant de tableau de bord d’inspiration rétro conçu pour les sites Web d’entreprise ou d’entreprise qui combine l’esthétique des années 80/90 avec une mise en page et une palette de couleurs modernes. Il est réactif et prend en charge le thème sombre, avec des éléments interactifs tels que des cartes pour les statistiques, les profils d’utilisateurs, etc.
Tableau de bord des médias sociaux
Un composant de tableau de bord réactif pour les réseaux sociaux avec des micro-interactions, une palette de couleurs complémentaires, une complexité modérée et une prise en charge du thème sombre à l’aide de Tailwind CSS. Comprend des profils d’utilisateurs avec des avatars de randomuser.me et des flux avec des images de picsum.photos.
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.