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.
HTML Code
<div class="flex flex-col min-h-screen bg-gray-50 dark:bg-gray-900">
<header class="flex justify-between items-center p-4 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 shadow-lg">
<h1 class="text-2xl font-bold text-white">Dashboard</h1>
<button class="bg-white text-purple-500 py-2 px-4 rounded-lg dark:bg-gray-800 dark:text-purple-400 transition-all">Edit</button>
</header>
<main class="flex-grow p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Total Sales</h2>
<p class="text-2xl text-purple-500 dark:text-purple-300">$45,000</p>
<img src="https://picsum.photos/200" alt="Sales Chart" class="mt-4 rounded-lg">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Users</h2>
<p class="text-2xl text-purple-500 dark:text-purple-300">1200</p>
<img src="https://picsum.photos/200" alt="User Statistics" class="mt-4 rounded-lg">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Feedback</h2>
<p class="text-2xl text-purple-500 dark:text-purple-300">300</p>
<img src="https://picsum.photos/200" alt="Feedback Chart" class="mt-4 rounded-lg">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Team Members</h2>
<div class="flex space-x-2 mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 2" class="w-10 h-10 rounded-full">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 3" class="w-10 h-10 rounded-full">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4" class="w-10 h-10 rounded-full">
</div>
</div>
</main>
<footer class="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 text-white text-center p-4">
<p>© 2023 Company Name. All rights reserved.</p>
</footer>
</div>Composants associés
Brutalist_Dating_Dashboard
Un composant de tableau de bord de style brutaliste pour les plateformes de rencontres et les réseaux sociaux, avec un design audacieux, un contraste élevé et une palette de couleurs violet/violet. Réactif avec prise en charge du mode sombre.
Dashboard_Weather_Climate_Swiss
Un composant complexe et réactif du tableau de bord météo et climatique inspiré de la typographie suisse/internationale, utilisant des tons de terre et prenant en charge le mode sombre. Dispose de plusieurs points de données tels que la météo actuelle, les prévisions, la qualité de l’air et les tendances climatiques.
Composant Tableaux de bord
Un composant de tableau de bord minimaliste présentant un design plat avec des effets réactifs et une prise en charge du thème sombre, construit à l’aide de Tailwind CSS.