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.
HTML Code
<div class="min-h-screen bg-gray-800 flex items-center justify-center p-5">
<div class="bg-white dark:bg-gray-900 bg-opacity-60 backdrop-blur-lg rounded-lg shadow-lg p-8 w-full max-w-3xl">
<h2 class="text-gray-900 dark:text-white text-2xl font-bold mb-5">Product Insights</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
<h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Total Sales</h3>
<img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/100" alt="Sales Insights" />
<p class="text-gray-600 dark:text-gray-400 mt-2">$15,237</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
<h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Total Products</h3>
<img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/101" alt="Product Count" />
<p class="text-gray-600 dark:text-gray-400 mt-2">250</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
<h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Average Order Value</h3>
<img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/102" alt="Average Order Value" />
<p class="text-gray-600 dark:text-gray-400 mt-2">$61.50</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
<h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">New Customers</h3>
<img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/103" alt="New Customers" />
<p class="text-gray-600 dark:text-gray-400 mt-2">35</p>
</div>
</div>
<div class="mt-5 border-t border-gray-300 dark:border-gray-600 pt-5">
<h3 class="text-gray-900 dark:text-white font-bold mb-2">Customer Feedback</h3>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar" />
<div class="ml-4">
<p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">"Great shopping experience! Highly recommend."</p>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Composants de visualisation de données
Un composant de visualisation de données réactif, compatible avec le mode sombre pour les blogs, avec un design rétro/vintage avec une palette de couleurs complémentaires et des éléments interactifs complexes.
Composant Composants de visualisation de données
Un composant de visualisation de données réactif avec plusieurs éléments interactifs, conçu pour un site Web de blog/contenu. Il présente un design minimaliste / plat, une palette de couleurs complémentaires et inclut la prise en charge du thème sombre.
Composant de visualisation des données
Un composant de visualisation de données réactif conçu avec une esthétique rétro/vintage inspirée des années 80 et 90, avec la prise en charge des thèmes sombres et l’utilisation d’images de remplacement.