Composant Graphiques
Un composant de graphique simple et réactif avec des couleurs pastel et la prise en charge du mode sombre, conçu pour la consommation de blogs/contenus avec des micro-interactions subtiles via des effets de survol. Pas de JavaScript.
HTML Code
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
<div class="flex flex-col space-y-4">
<div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-blue-100 dark:bg-blue-700">
<div class="text-sm font-medium text-blue-800 dark:text-blue-200">January</div>
<div class="w-2/3 bg-blue-200 dark:bg-blue-600 rounded-full h-4">
<div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-full stunning-animation" style="width: 75%;"></div>
</div>
<div class="text-sm font-medium text-blue-800 dark:text-blue-200">75%</div>
</div>
<div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-green-100 dark:bg-green-700">
<div class="text-sm font-medium text-green-800 dark:text-green-200">February</div>
<div class="w-2/3 bg-green-200 dark:bg-green-600 rounded-full h-4">
<div class="bg-green-500 dark:bg-green-400 h-4 rounded-full stunning-animation" style="width: 60%;"></div>
</div>
<div class="text-sm font-medium text-green-800 dark:text-green-200">60%</div>
</div>
<div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-purple-100 dark:bg-purple-700">
<div class="text-sm font-medium text-purple-800 dark:text-purple-200">March</div>
<div class="w-2/3 bg-purple-200 dark:bg-purple-600 rounded-full h-4">
<div class="bg-purple-500 dark:bg-purple-400 h-4 rounded-full stunning-animation" style="width: 90%;"></div>
</div>
<div class="text-sm font-medium text-purple-800 dark:text-purple-200">90%</div>
</div>
</div>
</div>
</div>Composants associés
Composant Graphiques
Un composant de graphiques complexe conçu pour les sites Web d’entreprise et d’entreprise, avec une conception 3D, une palette de couleurs complémentaire et une structure réactive avec prise en charge du mode sombre.
Composant Graphiques
Un composant de graphiques minimaliste avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
RetroChartsComponent
Un composant de graphique rétro/vintage avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS. Comprend des images de remplacement.