VibrantGlassmorphismChart
Un componente de gráfico de Glassmorphism simple con colores vibrantes, adecuado para blogs y sitios de contenido. El componente es responsivo e incluye soporte para temas oscuros mediante Tailwind CSS.
Código HTML
<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>Componentes relacionados
Gráfico de barras de modo oscuro
Gráfico de barras responsivo para mostrar datos con soporte para modo oscuro.
Componente Gráficos
Un componente de gráficos complejo diseñado para sitios web comerciales y corporativos, con un diseño 3D, una combinación de colores complementaria y una estructura receptiva con soporte para modo oscuro.
RetroChartsComponent
Un componente de gráfico retro/vintage con efectos responsivos y soporte para temas oscuros utilizando Tailwind CSS. Incluye imágenes de marcador de posición.