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 de visualisation de données réactif avec des éléments de conception 3D avec prise en charge des thèmes sombres.
Composant de visualisation de données Neumorphism
Composant de visualisation de données de style Neumorphism pour le contenu du blog, avec une palette de couleurs pastel, une complexité modérée, une réactivité et une prise en charge du mode sombre.
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.