Composant Graphiques
Un composant de graphiques simple et minimaliste avec des effets réactifs et une prise en charge du thème sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
<h2 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Sales Performance</h2>
<div class="flex justify-between items-center mb-4">
<div class="text-sm text-gray-500 dark:text-gray-400">Last 30 Days</div>
<select class="text-sm text-gray-500 dark:text-gray-400 bg-transparent border-none">
<option>Monthly</option>
<option>Weekly</option>
<option>Daily</option>
</select>
</div>
<div class="h-40">
<!-- Placeholder for chart -->
<div class="flex items-end h-full">
<div class="w-1/6 bg-blue-500 h-3/4 rounded-t dark:bg-blue-600"></div>
<div class="w-1/6 bg-blue-500 h-2/4 rounded-t dark:bg-blue-600 ml-1"></div>
<div class="w-1/6 bg-blue-500 h-1/4 rounded-t dark:bg-blue-600 ml-1"></div>
<div class="w-1/6 bg-blue-500 h-full rounded-t dark:bg-blue-600 ml-1"></div>
<div class="w-1/6 bg-blue-500 h-3/4 rounded-t dark:bg-blue-600 ml-1"></div>
<div class="w-1/6 bg-blue-500 h-2/4 rounded-t dark:bg-blue-600 ml-1"></div>
</div>
</div>
</div>Composants associés
Tableau des ventes de Glassmorphism
Un composant graphique simple et réactif avec un style Glassmorphism, une palette de couleurs vives et une prise en charge du mode sombre, adapté aux tableaux de bord de commerce électronique.
Composant Graphiques
Composant de graphiques complexe conçu pour les applications Web de commerce électronique en mode sombre avec une palette de couleurs en niveaux de gris. Ce composant comprend plusieurs éléments interactifs tels que des graphiques, des points de données, des info-bulles et des boutons, avec une conception réactive à l’aide de Tailwind CSS.
Composant Graphiques
Un composant de graphiques de style brutaliste pour les sites Web d’entreprise, avec une palette de couleurs triadique et une complexité modérée. Il inclut un design réactif et la prise en charge du mode sombre à l’aide de Tailwind CSS.