Componente Gráficos
Un componente de gráficos minimalista con diseño responsivo y soporte de temas oscuros usando Tailwind CSS.
Código HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex items-center justify-between">
<div class="text-sm text-gray-500 dark:text-gray-300">Revenue</div>
<div class="text-lg font-bold text-green-500">$12,450</div>
</div>
<div class="flex items-center justify-between">
<div class="text-sm text-gray-500 dark:text-gray-300">Profit</div>
<div class="text-lg font-bold text-blue-500">$5,600</div>
</div>
</div>
<div class="mt-4">
<div class="w-full h-32 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
</div>
</div>Componentes relacionados
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.
SkeuomorphismChartsComponent
Componente de gráficos esqueuomórficos para redes sociales con colores complementarios
Componente Gráficos
Un componente de gráficos responsivo diseñado con los principios de Material Design, con un esquema de color pastel y una interactividad compleja para mostrar portafolios. Incluye soporte para el modo oscuro con clases CSS de Tailwind.