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
Componente Gráficos
Un componente de gráficos complejo y receptivo con un esquema de color Neon/Electric, inspirado en Material Design para CRM/Business Tools. Incluye múltiples elementos interactivos y soporte completo para el modo oscuro.
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.
Componente de gráficos esqueuomórficos
Un componente de gráficos complejo y receptivo con un diseño esqueuomórfico, un esquema de color neutro cálido y compatibilidad con el modo oscuro, adecuado para paneles de foros o comunidades.