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.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="container mx-auto px-4 py-8">
<h2 class="text-3xl font-semibold text-gray-800 dark:text-white mb-6">Dashboard</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Users</h3>
<p class="text-2xl font-bold text-gray-800 dark:text-white">1,234</p>
<img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Sales</h3>
<p class="text-2xl font-bold text-gray-800 dark:text-white">567</p>
<img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Revenue</h3>
<p class="text-2xl font-bold text-gray-800 dark:text-white">$12,345</p>
<img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Sessions</h3>
<p class="text-2xl font-bold text-gray-800 dark:text-white">1,890</p>
<img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
</div>
</div>
<div class="mt-8 bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Latest Users</h3>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="py-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
<div>
<p class="text-gray-800 dark:text-white">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
</div>
</li>
<li class="py-4 flex items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
<div>
<p class="text-gray-800 dark:text-white">Jane Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
</div>
</li>
<li class="py-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
<div>
<p class="text-gray-800 dark:text-white">Mike Smith</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
</div>
</li>
</ul>
</div>
</div>
</div>Composants associés
Composant Tableaux de bord
Composant de tableaux de bord avec conception Neumorphism, effets réactifs et prise en charge du thème sombre.
Composant de tableau de bord
Un composant de tableau de bord simple avec un design 3D et une palette de couleurs pastel, réactif et avec prise en charge du mode sombre.
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.