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
Componente de visualización de datos de neumorfismo
Componente de visualización de datos de estilo neumorfismo para contenido de blog, con un esquema de color pastel, complejidad moderada, capacidad de respuesta y compatibilidad con modo oscuro.
Componente de componentes de visualización de datos
Un componente de visualización de datos retro-vintage para redes sociales, con un esquema de color complementario y una complejidad moderada. Es responsivo y admite el modo oscuro usando Tailwind CSS.
Componentes de visualización de datos
Un componente web para la visualización de datos utilizando el estilo Material Design con Tailwind CSS, con diseños responsivos, compatibilidad con temas oscuros e imágenes de marcador de posición.