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
Composant du tableau de bord de l’agriculture de luxe
Un composant de tableau de bord élégant et sophistiqué pour l’agriculture et les sites Web agricoles, avec une palette de couleurs noir et blanc avec un accent émeraude vibrant. Il comprend des indicateurs clés, des activités récentes et des éléments interactifs, conçus pour être entièrement réactifs et prendre en charge le mode sombre.
Dashboard_Component
Un composant de tableau de bord financier/bancaire réactif avec un style de conception aquarelle/artistique et une palette de couleurs chaudes au coucher du soleil. Inclut la prise en charge du mode sombre et un niveau de complexité modéré.
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.