Componente Gráficos
Un componente de gráficos complejo diseñado para aplicaciones web de comercio electrónico en modo oscuro con un esquema de color en escala de grises. Este componente incluye múltiples elementos interactivos como gráficos, puntos de datos, información sobre herramientas y botones, con un diseño responsivo que utiliza Tailwind CSS.
Código HTML
<div class="bg-gray-900 text-gray-100 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4">Sales Chart</h2>
<div class="flex items-center justify-between mb-4">
<span class="text-lg">Last 30 Days</span>
<button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Weekly</button>
<button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Monthly</button>
<button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Yearly</button>
</div>
<div class="relative">
<img src="https://picsum.photos/600/300" alt="Sales Chart" class="w-full rounded-lg">
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 rounded-lg">
<span class="text-xl font-semibold">$23,000</span>
<span class="text-sm">Total Sales</span>
</div>
</div>
<div class="mt-4">
<div class="flex justify-around text-sm text-gray-400">
<div class="text-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
<span>User 1</span>
</div>
<div class="text-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
<span>User 2</span>
</div>
<div class="text-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
<span>User 3</span>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Gráficos
Un componente de gráficos complejo diseñado para sitios web comerciales y corporativos, con un diseño 3D, una combinación de colores complementaria y una estructura receptiva con soporte para modo oscuro.
Componente de gráfico de Cyberpunk - Gobierno/Público
Un componente de gráfico moderadamente complejo con estética cyberpunk, adecuado para sitios web gubernamentales y de servicio público. Cuenta con un fondo oscuro, acentos de neón brillantes y una paleta de colores retro / vintage. Responsivo e incluye soporte para modo oscuro.
Gráfico de barras de modo oscuro
Gráfico de barras responsivo para mostrar datos con soporte para modo oscuro.