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 e-commerce simple et réactif avec un style de conception glassmorphism et une palette de couleurs monochromatiques, avec prise en charge du mode sombre.
Weather_Climate_Retro_Dark_Dashboard
Un composant de tableau de bord simple et rétro en mode sombre pour les données météorologiques et climatiques, réactif sur tous les appareils.
Composants de visualisation de données
Composant Web pour la visualisation de données à l’aide du style Material Design avec Tailwind CSS, avec des mises en page réactives, la prise en charge des thèmes sombres et des images d’espace réservé.