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
Composants de visualisation de données
Composants de visualisation de données de style Neumorphism pour un portefeuille avec prise en charge du thème sombre
Sports_Fitness_Dashboard_Monospace
Un composant de tableau de bord de sport/fitness épuré et inspiré du code, avec des polices monospaces, une esthétique de terminal et des tons océan/bleu. Il présente un design réactif, une prise en charge du mode sombre et des éléments de visualisation de données adaptés aux équipes sportives et aux applications de fitness.
Composante Visualisation de Données - Agriculture Industrielle
Un composant de visualisation de données à l’esthétique industrielle et brute, utilisant une palette de couleurs violet/violet, adapté à l’agriculture et aux sites Web agricoles. Il affiche les indicateurs clés dans une mise en page réactive avec prise en charge du mode sombre.