Componentes de visualización de datos
Un componente de visualización de datos receptivo con elementos de diseño 3D con soporte para temas oscuros.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center py-10">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden transform transition-all hover:scale-105 hover:shadow-2xl">
<div class="p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Sales Data Visualization</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg p-4 flex flex-col items-center shadow-lg">
<h3 class="text-xl text-white font-medium">Monthly Sales</h3>
<img class="rounded-lg mt-2" src="https://picsum.photos/300/200?random=1" alt="Sales Chart">
<p class="text-white mt-2">Total Sales: $15,000</p>
</div>
<div class="bg-gradient-to-br from-green-400 to-green-600 rounded-lg p-4 flex flex-col items-center shadow-lg">
<h3 class="text-xl text-white font-medium">User Growth</h3>
<img class="rounded-lg mt-2" src="https://picsum.photos/300/200?random=2" alt="User Growth Chart">
<p class="text-white mt-2">New Users: 500</p>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Team Members</h2>
<div class="flex justify-around mt-4">
<div class="flex flex-col items-center">
<img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1">
<p class="text-sm text-gray-700 dark:text-gray-300">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Sales Manager</p>
</div>
<div class="flex flex-col items-center">
<img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar 2">
<p class="text-sm text-gray-700 dark:text-gray-300">Jane Smith</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Data Analyst</p>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Social_Connection_Chart_Component
Un componente de gráfico de conexión social de complejidad moderada con un diseño orgánico inspirado en la naturaleza, con negro, blanco y un solo color de acento brillante. Diseñado para plataformas sociales y de citas, muestra visualmente las conexiones con líneas fluidas y avatares de usuario. Totalmente receptivo con soporte para modo oscuro.
Componente de Visualización de Datos - Agricultura Industrial
Un componente de visualización de datos con una estética industrial y cruda, que utiliza un esquema de color púrpura / violeta, adecuado para sitios web de agricultura y ganadería. Muestra métricas clave en un diseño responsivo con soporte para modo oscuro.
Luxury_Premium_Grayscale_Dating_Social_Data_Visualization_Component
Un componente de visualización de datos elegante y sofisticado diseñado para plataformas sociales y de citas, con un esquema de color en escala de grises y un diseño receptivo con soporte para modo oscuro. Muestra las estadísticas de los usuarios y las métricas de conexión.