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.
HTML Code
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-bold mb-4">Sales Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-lg font-semibold">Total Sales</h3>
<p class="text-3xl text-violet-500">$12,345</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-lg font-semibold">Total Orders</h3>
<p class="text-3xl text-green-400">150</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-lg font-semibold">Total Customers</h3>
<p class="text-3xl text-blue-400">80</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-lg font-semibold">Average Order Value</h3>
<p class="text-3xl text-yellow-400">$82.30</p>
</div>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold">Recent Orders</h3>
<ul class="list-disc list-inside mt-2">
<li class="flex items-center justify-between bg-gray-600 p-3 rounded-lg mb-2">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span>John Doe</span>
</div>
<span class="text-violet-400">$120.00</span>
</li>
<li class="flex items-center justify-between bg-gray-600 p-3 rounded-lg mb-2">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span>Jane Smith</span>
</div>
<span class="text-green-400">$85.00</span>
</li>
<li class="flex items-center justify-between bg-gray-600 p-3 rounded-lg mb-2">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span>Emily Johnson</span>
</div>
<span class="text-blue-400">$96.00</span>
</li>
</ul>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold">Sales Chart</h3>
<img src="https://picsum.photos/400/200" alt="Sales Chart" class="mt-2 rounded-lg">
</div>
</div>Composants associés
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.
Social_Connection_Chart_Component
Un composant de graphique de connexion sociale de complexité modérée avec un design organique inspiré de la nature, avec du noir, du blanc et une seule couleur d’accent vive. Conçu pour les plateformes de rencontres et les plateformes sociales, il met en valeur les connexions visuellement avec des lignes fluides et des avatars d’utilisateurs. Entièrement réactif avec prise en charge du mode sombre.
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.