Componente Gráficos
Un componente de gráficos responsivo diseñado en estilo skeuomorphism con un esquema de color en escala de grises y compatibilidad con modo oscuro, ideal para aplicaciones de comercio electrónico.
Código HTML
<div class="max-w-2xl mx-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">Sales Data</h2>
<div class="flex justify-between">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item A</h3>
<img src="https://picsum.photos/200/100?random=1" alt="Item A" class="w-full rounded-md">
<p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 150</p>
<div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
<div class="h-2 bg-blue-500 rounded-full w-3/4"></div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item B</h3>
<img src="https://picsum.photos/200/100?random=2" alt="Item B" class="w-full rounded-md">
<p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 120</p>
<div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
<div class="h-2 bg-blue-500 rounded-full w-2/4"></div>
</div>
</div>
</div>
<div class="flex justify-between mt-4">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item C</h3>
<img src="https://picsum.photos/200/100?random=3" alt="Item C" class="w-full rounded-md">
<p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 100</p>
<div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
<div class="h-2 bg-blue-500 rounded-full w-1/4"></div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item D</h3>
<img src="https://picsum.photos/200/100?random=4" alt="Item D" class="w-full rounded-md">
<p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 80</p>
<div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
<div class="h-2 bg-blue-500 rounded-full w-1/5"></div>
</div>
</div>
</div>
</div>Componentes relacionados
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.
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.