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
Composant de visualisation des données
Un composant de visualisation de données réactif conçu dans le style Material Design avec une palette de couleurs pastel, adapté à la présentation de travaux de portfolio avec prise en charge du mode sombre.
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.
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.