Componente Paneles
Un componente de tablero de inspiración retro diseñado para sitios web comerciales o corporativos que combina la estética de los años 80/90 con un diseño y una combinación de colores modernos. Es responsivo y admite el tema oscuro, con elementos interactivos como tarjetas para estadísticas, perfiles de usuario y más.
Código HTML
<div class="flex flex-col min-h-screen bg-gray-50 dark:bg-gray-900">
<header class="flex justify-between items-center p-4 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 shadow-lg">
<h1 class="text-2xl font-bold text-white">Dashboard</h1>
<button class="bg-white text-purple-500 py-2 px-4 rounded-lg dark:bg-gray-800 dark:text-purple-400 transition-all">Edit</button>
</header>
<main class="flex-grow p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Total Sales</h2>
<p class="text-2xl text-purple-500 dark:text-purple-300">$45,000</p>
<img src="https://picsum.photos/200" alt="Sales Chart" class="mt-4 rounded-lg">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Users</h2>
<p class="text-2xl text-purple-500 dark:text-purple-300">1200</p>
<img src="https://picsum.photos/200" alt="User Statistics" class="mt-4 rounded-lg">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Feedback</h2>
<p class="text-2xl text-purple-500 dark:text-purple-300">300</p>
<img src="https://picsum.photos/200" alt="Feedback Chart" class="mt-4 rounded-lg">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Team Members</h2>
<div class="flex space-x-2 mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 2" class="w-10 h-10 rounded-full">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 3" class="w-10 h-10 rounded-full">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4" class="w-10 h-10 rounded-full">
</div>
</div>
</main>
<footer class="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 text-white text-center p-4">
<p>© 2023 Company Name. All rights reserved.</p>
</footer>
</div>Componentes relacionados
Componente de panel de control
Un componente de tablero simple con diseño 3D y combinación de colores pastel, responsivo y con soporte para modo oscuro.
Panel de control de redes sociales
Un componente de panel de control de redes sociales receptivo con microinteracciones, combinación de colores complementaria, complejidad moderada y compatibilidad con temas oscuros mediante Tailwind CSS. Incluye perfiles de usuario con avatares de randomuser.me y feeds con imágenes de picsum.photos.
Industrial_Sports_Dashboard
Un componente de tablero de complejidad moderada para aplicaciones deportivas/de fitness con un estilo de diseño industrial, con tonos tierra y diseño receptivo con soporte para modo oscuro. Muestra las métricas clave, las actividades recientes y el rendimiento individual/del equipo.