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 tableaux de bord complexe conçu pour le mode sombre avec une palette de couleurs monochromatiques pour une utilisation professionnelle/d’entreprise. Il comporte des éléments interactifs riches et est réactif.
Composant Tableaux de bord
Un composant de tableau de bord réactif conçu avec des éléments 3D et des tons Terre, présentant la visualisation des données et les panneaux de contrôle avec prise en charge du thème sombre.
Tableau de bord social Art Déco
Un composant de tableau de bord de complexité modérée pour les plateformes de rencontres/sociales, avec un style de design Art déco avec des couleurs sourdes/désaturées et une réactivité totale. Comprend des cartes de profil, un flux d’activité et une navigation, avec prise en charge du mode sombre.