Composants de visualisation de données
Un composant complexe de visualisation des données du tableau de bord avec une esthétique rétro/vintage et des schémas de couleurs complémentaires.
HTML Code
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg dark:bg-gray-900">
<h1 class="text-3xl font-bold mb-4">Data Visualization Dashboard</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-red-500 p-4 rounded-lg shadow-md">
<h2 class="text-xl font-semibold">User Statistics</h2>
<p class="text-lg">Total Users: 1,200</p>
<p class="text-lg">Active: 850</p>
<img src="https://picsum.photos/300/200?random=1" alt="User Stats" class="mt-4 rounded-lg" />
</div>
<div class="bg-blue-500 p-4 rounded-lg shadow-md">
<h2 class="text-xl font-semibold">Sales Overview</h2>
<p class="text-lg">Total Sales: $20,000</p>
<p class="text-lg">Monthly Growth: 15%</p>
<img src="https://picsum.photos/300/200?random=2" alt="Sales Overview" class="mt-4 rounded-lg" />
</div>
<div class="bg-green-500 p-4 rounded-lg shadow-md">
<h2 class="text-xl font-semibold">Performance Goals</h2>
<p class="text-lg">Gained 300 New Users</p>
<p class="text-lg">Target Achieved: 95%</p>
<img src="https://picsum.photos/300/200?random=3" alt="Performance Goals" class="mt-4 rounded-lg" />
</div>
</div>
<div class="mt-6 bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
<h2 class="text-xl font-semibold">Recent Activities</h2>
<ul class="list-disc list-inside">
<li><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="inline w-8 h-8 rounded-full"> John Doe added a new item</li>
<li><img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="inline w-8 h-8 rounded-full"> Mike Smith reached 1,000 sales</li>
<li><img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="inline w-8 h-8 rounded-full"> Alex Johnson updated their profile</li>
</ul>
</div>
</div>Composants associés
Composant Composants de visualisation de données
Un composant simple de visualisation de données conçu pour le commerce électronique, doté d’une interface en mode sombre avec des couleurs vives.
Social_Media_Dashboard
Un composant complexe de tableau de bord de médias sociaux avec une esthétique monochromatique de Material Design, avec des mises en page basées sur une grille, des effets de profondeur et une réactivité avec prise en charge du mode sombre. Conçu pour les interfaces de réseaux sociaux.
Composant Composants de visualisation de données
Un composant de visualisation de données simple, propre et inspiré du code pour la documentation/les sites wiki, avec des polices monospace, une esthétique terminale et des tons de couleur sépia/marron, avec une réactivité totale et une prise en charge du mode sombre.