VibrantGlassmorphismChart
Un composant simple de graphique Glassmorphism avec des couleurs vives, adapté aux blogs et aux sites de contenu. Le composant est réactif et inclut la prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-20">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Sales Overview</h3>
<div class="relative h-40">
<canvas id="myChart"></canvas>
</div>
<div class="flex justify-around mt-4 text-gray-700 dark:text-gray-300 text-sm">
<div class="text-center">
<p class="font-semibold text-teal-500 dark:text-teal-400">January</p>
<p>$5,200</p>
</div>
<div class="text-center">
<p class="font-semibold text-rose-500 dark:text-rose-400">February</p>
<p>$6,100</p>
</div>
<div class="text-center">
<p class="font-semibold text-fuchsia-500 dark:text-fuchsia-400">March</p>
<p>$5,500</p>
</div>
</div>
</div>Composants associés
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.
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.
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.