Componente Paneles
Un componente de tablero complejo diseñado para el modo oscuro con un esquema de color monocromático para uso empresarial/corporativo. Cuenta con elementos interactivos enriquecidos y es responsivo.
Código HTML
<div class="min-h-screen bg-gray-900 text-gray-100 flex flex-col">
<header class="bg-gray-800 p-4 flex justify-between items-center">
<h1 class="text-2xl font-bold">Dashboard</h1>
<nav class="flex space-x-4">
<a href="#" class="hover:underline">Home</a>
<a href="#" class="hover:underline">Reports</a>
<a href="#" class="hover:underline">Settings</a>
</nav>
</header>
<main class="flex-1 p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-800 p-4 rounded-lg shadow">
<h2 class="font-semibold text-xl mb-2">Overview</h2>
<img src="https://picsum.photos/400/200" alt="Overview Image" class="rounded-lg mb-2" />
<p class="text-sm">Quick insights into the company metrics.</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow">
<h2 class="font-semibold text-xl mb-2">Stats</h2>
<img src="https://picsum.photos/400/200?random=1" alt="Stats Image" class="rounded-lg mb-2" />
<p class="text-sm">Detailed statistics overview.</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow">
<h2 class="font-semibold text-xl mb-2">Team</h2>
<div class="flex flex-wrap">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
<img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
<img src="https://randomuser.me/api/portraits/men/34.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
</div>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow">
<h2 class="font-semibold text-xl mb-2">Sales</h2>
<img src="https://picsum.photos/400/200?random=2" alt="Sales Image" class="rounded-lg mb-2" />
<p class="text-sm">Current sales metrics and trends.</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow">
<h2 class="font-semibold text-xl mb-2">Notifications</h2>
<ul class="list-disc pl-5">
<li class="text-sm">New project updates</li>
<li class="text-sm">User feedback received</li>
<li class="text-sm">System maintenance scheduled</li>
</ul>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow">
<h2 class="font-semibold text-xl mb-2">Activities</h2>
<p class="text-sm">Recent team activities will be displayed here.</p>
</div>
</main>
<footer class="bg-gray-800 p-4 text-center">
<p class="text-sm">© 2023 Your Company. All Rights Reserved.</p>
</footer>
</div>Componentes relacionados
Componente Paneles
Componente de paneles receptivos con microinteracciones, combinación de colores en escala de grises y nivel de complejidad complejo adaptado para fines de blog/contenido. Admite tema oscuro.
Componente de tablero de escala de grises brutalista
Un diseño de panel de control simple, de estilo brutalista, en escala de grises para sitios web comerciales / corporativos, receptivo con soporte para modo oscuro, construido con Tailwind CSS.
Componente Paneles
Un componente de tablero receptivo diseñado con elementos 3D y tonos Tierra, que muestra visualización de datos y paneles de control con soporte para temas oscuros.