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
Composant Composants de visualisation de données
Il s’agit d’un composant de réservation/réservation complexe et minimaliste avec une palette de couleurs néon/électrique, avec des éléments de visualisation de données tels qu’un calendrier et un sélecteur de créneaux horaires. Entièrement réactif avec prise en charge du mode sombre.
Composant Composants de visualisation de données
Il s’agit d’un composant simple de visualisation de données en mode sombre pour les médias sociaux avec une palette de couleurs analogue.
Skeuomorphic_Vibrant_Blog_Viz
Un composant complexe et skeuomorphe de visualisation de données pour la consommation de blogs/contenus avec une palette de couleurs vives, conçu pour la réactivité et le mode sombre.