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.
Código HTML
<div class="flex flex-col justify-center items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full md:w-3/4 lg:w-3/5">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Business Performance Overview</h2>
<div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 w-full">
<div class="flex-initial w-full bg-blue-500 dark:bg-blue-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Sales Chart</h3>
<img src="https://picsum.photos/300/200?random=1" alt="Sales Chart" class="rounded-md shadow-lg" />
</div>
<div class="flex-initial w-full bg-green-500 dark:bg-green-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Revenue Chart</h3>
<img src="https://picsum.photos/300/200?random=2" alt="Revenue Chart" class="rounded-md shadow-lg" />
</div>
</div>
<div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 w-full mt-4">
<div class="flex-initial w-full bg-purple-500 dark:bg-purple-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Customer Feedback</h3>
<img src="https://picsum.photos/300/200?random=3" alt="Customer Feedback" class="rounded-md shadow-lg" />
</div>
<div class="flex-initial w-full bg-orange-500 dark:bg-orange-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Market Analysis</h3>
<img src="https://picsum.photos/300/200?random=4" alt="Market Analysis" class="rounded-md shadow-lg" />
</div>
</div>
<div class="flex justify-between items-center mt-6 w-full">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-sm" />
<div class="ml-3">
<h4 class="text-lg font-semibold text-gray-800 dark:text-white">Analyst: John Doe</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Data Analyst, 5 years experience</p>
</div>
</div>
</div>Componentes relacionados
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.
Memphis_Marketplace_Charts_Component
Un componente de gráficos complejo y receptivo con una estética de diseño Memphis, colores complementarios audaces, adecuado para un mercado de múltiples proveedores. Incluye soporte para modo oscuro y elementos interactivos.
Componente Gráficos
Un componente de gráficos simple y minimalista con efectos responsivos y soporte para temas oscuros.