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 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.
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 simple et réactif conçu pour la présentation de portefeuilles, avec des micro-interactions et axé sur les tons de terre. Il prend en charge le thème sombre en utilisant Tailwind CSS.