Composants de visualisation de données
Un composant de tableau de bord de visualisation de données de style rétro vintage avec un thème sombre qui présente des tons de terre et une mise en page simple.
HTML Code
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
<h1 class="text-3xl font-bold text-amber-300 mb-4">Data Visualization Dashboard</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4">
<h2 class="text-xl text-green-200">User Statistics</h2>
<p class="text-gray-300 dark:text-gray-400">Total Users: 250</p>
<img src="https://picsum.photos/200/100?random=1" alt="Data Visualization" class="w-full rounded-lg mt-2">
</div>
<div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4">
<h2 class="text-xl text-green-200">Sales Overview</h2>
<p class="text-gray-300 dark:text-gray-400">Total Sales: $10,000</p>
<img src="https://picsum.photos/200/100?random=2" alt="Sales Overview" class="w-full rounded-lg mt-2">
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4 mt-4">
<h2 class="text-xl text-green-200">Recent Activity</h2>
<ul class="text-gray-300 dark:text-gray-400">
<li class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span>User1 logged in</span>
</li>
<li class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span>User2 made a purchase</span>
</li>
<li class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span>User3 logged out</span>
</li>
</ul>
</div>
</div>Composants associés
Composants de visualisation de données
Un composant de visualisation de données réactif conçu avec les principes de Material Design tels que les mises en page basées sur une grille et les effets de profondeur, avec prise en charge des thèmes sombres.
Composant de visualisation des données
Composant de visualisation de données Neumorphism avec effets réactifs et prise en charge du thème sombre.
Composant de visualisation des données
Un composant de visualisation de données réactif conçu avec une esthétique rétro/vintage inspirée des années 80 et 90, avec la prise en charge des thèmes sombres et l’utilisation d’images de remplacement.