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.
HTML Code
<div class="min-h-screen bg-gray-900 text-gray-100 flex flex-col">
<header class="bg-gray-800 p-4 flex justify-between items-center">
<h1 class="text-2xl font-bold">Dashboard</h1>
<nav class="flex space-x-4">
<a href="#" class="hover:underline">Home</a>
<a href="#" class="hover:underline">Reports</a>
<a href="#" class="hover:underline">Settings</a>
</nav>
</header>
<main class="flex-1 p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-800 p-4 rounded-lg shadow">
<h2 class="font-semibold text-xl mb-2">Overview</h2>
<img src="https://picsum.photos/400/200" alt="Overview Image" class="rounded-lg mb-2" />
<p class="text-sm">Quick insights into the company metrics.</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow">
<h2 class="font-semibold text-xl mb-2">Stats</h2>
<img src="https://picsum.photos/400/200?random=1" alt="Stats Image" class="rounded-lg mb-2" />
<p class="text-sm">Detailed statistics overview.</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow">
<h2 class="font-semibold text-xl mb-2">Team</h2>
<div class="flex flex-wrap">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
<img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
<img src="https://randomuser.me/api/portraits/men/34.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
</div>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow">
<h2 class="font-semibold text-xl mb-2">Sales</h2>
<img src="https://picsum.photos/400/200?random=2" alt="Sales Image" class="rounded-lg mb-2" />
<p class="text-sm">Current sales metrics and trends.</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow">
<h2 class="font-semibold text-xl mb-2">Notifications</h2>
<ul class="list-disc pl-5">
<li class="text-sm">New project updates</li>
<li class="text-sm">User feedback received</li>
<li class="text-sm">System maintenance scheduled</li>
</ul>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow">
<h2 class="font-semibold text-xl mb-2">Activities</h2>
<p class="text-sm">Recent team activities will be displayed here.</p>
</div>
</main>
<footer class="bg-gray-800 p-4 text-center">
<p class="text-sm">© 2023 Your Company. All Rights Reserved.</p>
</footer>
</div>Composants associés
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.
Composant Tableaux de bord
Composant de tableaux de bord avec conception Neumorphism, effets réactifs et prise en charge du thème sombre.
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.