Componente Gráficos
Un componente de gráficos simple y minimalista con efectos responsivos y soporte para temas oscuros.
Código HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
<h2 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Sales Performance</h2>
<div class="flex justify-between items-center mb-4">
<div class="text-sm text-gray-500 dark:text-gray-400">Last 30 Days</div>
<select class="text-sm text-gray-500 dark:text-gray-400 bg-transparent border-none">
<option>Monthly</option>
<option>Weekly</option>
<option>Daily</option>
</select>
</div>
<div class="h-40">
<!-- Placeholder for chart -->
<div class="flex items-end h-full">
<div class="w-1/6 bg-blue-500 h-3/4 rounded-t dark:bg-blue-600"></div>
<div class="w-1/6 bg-blue-500 h-2/4 rounded-t dark:bg-blue-600 ml-1"></div>
<div class="w-1/6 bg-blue-500 h-1/4 rounded-t dark:bg-blue-600 ml-1"></div>
<div class="w-1/6 bg-blue-500 h-full rounded-t dark:bg-blue-600 ml-1"></div>
<div class="w-1/6 bg-blue-500 h-3/4 rounded-t dark:bg-blue-600 ml-1"></div>
<div class="w-1/6 bg-blue-500 h-2/4 rounded-t dark:bg-blue-600 ml-1"></div>
</div>
</div>
</div>Componentes relacionados
Componente Gráficos
Un componente de gráficos minimalista con diseño responsivo y soporte de temas oscuros usando Tailwind CSS.
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.
Componente Gráficos
Un componente de gráficos de estilo brutalista para sitios web de negocios, con un esquema de color triádico y una complejidad moderada. Incluye diseño responsivo y soporte para el modo oscuro usando Tailwind CSS.