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
Tableau de bord sépia de Memphis
Un composant de tableau de bord à l’esthétique Memphis Design, avec des formes géométriques audacieuses et une palette de couleurs chaudes sépia/marron, adapté aux sites Web d’entreprise et d’entreprise. Comprend une réactivité complète et la prise en charge du mode sombre.
Composant Tableaux de bord
Un composant de tableau de bord simple et monochrome en mode sombre pour les portefeuilles, conçu avec Tailwind CSS. Il présente un design réactif et utilise différentes nuances d’une seule couleur pour un look élégant et minimaliste.
Composant du tableau de bord des crypto-monnaies
Un composant de tableau de bord de crypto-monnaie complexe et réactif avec un style de conception de typographie suisse/internationale, avec des éléments de dégradé multicolores et la prise en charge du mode sombre. Il comprend plusieurs sections telles qu’un aperçu du portefeuille, les tendances du marché, les transactions récentes et un graphique.