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 réactif de style 3D avec prise en charge du thème sombre à l’aide de Tailwind CSS.
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 de skeuomorphisme
Un composant de graphiques réactifs avec le style Skeuomorphism, des couleurs vives et la prise en charge du mode sombre pour les interfaces de médias sociaux.