Composant Tableaux de bord
Un composant de tableau de bord réactif conçu avec des éléments 3D et des tons Terre, présentant la visualisation des données et les panneaux de contrôle avec prise en charge du thème sombre.
HTML Code
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
<div class="max-w-7xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Dashboard</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="bg-yellow-100 dark:bg-yellow-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/200/150?random=1" alt="Data Visualization" class="rounded-t-lg">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Overview</h2>
<p class="text-gray-600 dark:text-gray-400">Current sales data and trends.</p>
</div>
</div>
<!-- Card 2 -->
<div class="bg-green-100 dark:bg-green-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/200/150?random=2" alt="User Engagement" class="rounded-t-lg">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h2>
<p class="text-gray-600 dark:text-gray-400">Track user interactions and engagement metrics.</p>
</div>
</div>
<!-- Card 3 -->
<div class="bg-blue-100 dark:bg-blue-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/200/150?random=3" alt="Performance Metrics" class="rounded-t-lg">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Performance Metrics</h2>
<p class="text-gray-600 dark:text-gray-400">Analyze performance against key metrics.</p>
</div>
</div>
<!-- Card 4 -->
<div class="bg-red-100 dark:bg-red-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/200/150?random=4" alt="Visitor Statistics" class="rounded-t-lg">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Visitor Statistics</h2>
<p class="text-gray-600 dark:text-gray-400">Monitor visitor statistics and behavior.</p>
</div>
</div>
</div>
<div class="mt-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Recent Users</h2>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<ul class="space-y-4">
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
<div>
<h3 class="font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
<p class="text-gray-600 dark:text-gray-400">Joined 2 days ago</p>
</div>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full">
<div>
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
<p class="text-gray-600 dark:text-gray-400">Joined 1 week ago</p>
</div>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full">
<div>
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Mike Johnson</h3>
<p class="text-gray-600 dark:text-gray-400">Joined 3 weeks ago</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>Composants associés
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.
Composant Tableaux de bord
Composant de tableaux de bord réactifs avec micro-interactions, schéma de couleurs en niveaux de gris et niveau de complexité complexe adapté à l’objectif du blog/contenu. Prend en charge le thème sombre.
Dashboard_Agriculture_ForestGreen_Luxury
Un composant de tableau de bord complexe sur le thème du luxe conçu pour l’agriculture et les sites Web agricoles, doté d’une élégante palette de couleurs forêt/vert et d’une réactivité totale avec prise en charge du mode sombre.