Composant Composants de visualisation de données de commerce électronique
Un composant de visualisation de données pour le commerce électronique, stylisé avec les principes de conception matérielle, les tons terreux et la prise en charge réactive du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="p-4 bg-white dark:bg-gray-800 shadow-md rounded-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Sales Performance</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400">Total Revenue</p>
<p class="text-2xl font-bold text-green-700 dark:text-green-400">$1,234,567</p>
</div>
<svg class="w-8 h-8 text-green-500 dark:text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8L11 20m-7-2a2 2 0 01-2-2V8a2 2 0 012-2h4l2 2m0 0l-3 3-2-2-4 4"></path></svg>
</div>
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400">Items Sold</p>
<p class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">9,876</p>
</div>
<svg class="w-8 h-8 text-yellow-500 dark:text-yellow-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7l-4 4m0 0l-4-4m4 4v8m-4-2a2 2 0 01-2-2V6a2 2 0 012-2h4l2 2m0 0l-3 3-2-2-4 4"></path></svg>
</div>
<div class="md:col-span-2 p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Sales Trends</h3>
<!-- Placeholder for a simple chart -->
<div class="h-32 bg-gray-200 dark:bg-gray-600 rounded-md flex items-center justify-center">
<p class="text-gray-500 dark:text-gray-400">Chart Placeholder</p>
</div>
</div>
</div>
<div class="mt-4 text-center">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View Full Report</a>
</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 de visualisation des données (néon/lueur)
Un composant complexe de visualisation de données pour les applications SaaS avec des effets de néon/lueur, des couleurs neutres chaudes et une réactivité totale avec prise en charge du mode sombre.
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.