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
Neumorphic_Forum_Dashboard
Un composant de tableau de bord neumorphique simple et réactif avec une palette de couleurs forêt/vert, conçu pour les plateformes de forum et de communauté, et inclut la prise en charge du mode sombre.
Tableau de bord de jeu
Un composant d’interface utilisateur de tableau de bord de jeu complexe et réactif conçu pour le mode sombre, avec une palette de couleurs en niveaux de gris. Comprend les statistiques des joueurs, l’activité récente et les listes de jeux.
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.