Tableau de bord d’entreprise rétro
Un composant de tableau de bord rétro/vintage en niveaux de gris pour les sites Web d’entreprise/d’entreprise, avec une complexité modérée et un design réactif. Prend en charge le thème sombre à l’aide du préfixe Tailwind CSS dark : pour le style. Images provenant de picsum.photos et avatars de randomuser.me.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-sans min-h-screen p-8">
<div class="container mx-auto">
<header class="flex justify-between items-center mb-8">
<h1 class="text-3xl font-bold">Dashboard</h1>
<div class="flex items-center space-x-4">
<input type="text" placeholder="Search..." class="p-2 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
</div>
</header>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
<h2 class="text-xl font-semibold mb-4">Sales Overview</h2>
<div class="h-40 bg-gray-300 dark:bg-gray-600 rounded"></div>
</div>
<div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
<h2 class="text-xl font-semibold mb-4">Recent Activity</h2>
<ul class="space-y-2">
<li class="flex justify-between"><span>New Order</span><span>$250</span></li>
<li class="flex justify-between"><span>Product View</span><span>Widget X</span></li>
<li class="flex justify-between"><span>User Login</span><span>Admin</span></li>
</ul>
</div>
<div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
<h2 class="text-xl font-semibold mb-4">Traffic Sources</h2>
<div class="h-40 bg-gray-300 dark:bg-gray-600 rounded"></div>
</div>
<div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6 md:col-span-2 lg:col-span-3">
<h2 class="text-xl font-semibold mb-4">Performance Metrics</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div>
<h3 class="text-lg">Revenue</h3>
<p class="text-2xl font-bold">$12,345</p>
</div>
<div>
<h3 class="text-lg">Visitors</h3>
<p class="text-2xl font-bold">5,678</p>
</div>
<div>
<h3 class="text-lg">Orders</h3>
<p class="text-2xl font-bold">901</p>
</div>
<div>
<h3 class="text-lg">Conversion</h3>
<p class="text-2xl font-bold">10.5%</p>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
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 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.
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.