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 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.
RetroDashboardComponent
Composant de tableau de bord rétro/vintage avec prise en charge du schéma en niveaux de gris et du mode sombre. Ce composant complexe comporte plusieurs éléments interactifs, un design réactif et utilise Tailwind CSS pour le style. Il convient pour un tableau de bord ou un panneau de contrôle.
Composants de visualisation de données
Composant Web pour la visualisation de données à l’aide du style Material Design avec Tailwind CSS, avec des mises en page réactives, la prise en charge des thèmes sombres et des images d’espace réservé.