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
Memphis_Marketplace_Charts_Component
Il s’agit d’un composant de graphiques complexe et réactif avec une esthétique Memphis Design, des couleurs complémentaires audacieuses, adapté à une place de marché multi-fournisseurs. Comprend la prise en charge du mode sombre et des éléments interactifs.
Composant Graphiques
Un composant de graphiques réactif conçu selon les principes de la conception matérielle, avec une palette de couleurs pastel et une interactivité complexe pour présenter des portefeuilles. Il inclut la prise en charge du mode sombre avec les classes CSS Tailwind.
Composant Cartes neumorphes
Il s’agit d’un composant de graphiques complexe et réactif avec un style de conception neumorphique et une palette de couleurs analogue, adapté à un portfolio pour présenter des travaux ou des produits. Inclut la prise en charge du mode sombre.