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
Componente lúdico de gráficos de arcoíris (Moda/Belleza)
Un componente de gráficos simple, divertido y colorido diseñado para marcas de moda y belleza, con elementos redondeados, degradados de arco iris y capacidad de respuesta total con soporte para modo oscuro.
Componente Gráficos
Un componente de gráfico simple y receptivo con colores pastel y soporte para modo oscuro, diseñado para el consumo de blog/contenido con microinteracciones sutiles a través de efectos de desplazamiento. Sin JavaScript.
Componente de gráfico de Cyberpunk
Un componente de gráfico receptivo e interactivo con estética cyberpunk, fondos oscuros, acentos de neón y colores neutros fríos, adecuado para plataformas educativas.