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.
Código HTML
<section class="dashboard-component bg-white dark:bg-gray-900 text-black dark:text-white p-8 border-4 border-black dark:border-white">
<div class="max-w-7xl mx-auto">
<!-- Banner -->
<div class="mb-8 border-4 border-black dark:border-white">
<img src="https://picsum.photos/1200/200" alt="Dashboard Banner" class="w-full h-40 object-cover">
</div>
<!-- Header -->
<div class="flex items-center justify-between mb-8">
<h1 class="text-3xl font-extrabold">Company Dashboard</h1>
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-black dark:border-white">
</div>
<!-- Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
<h2 class="text-xl font-bold mb-2">Total Sales</h2>
<p class="text-2xl">67,890</p>
</div>
<div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
<h2 class="text-xl font-bold mb-2">New Users</h2>
<p class="text-2xl">1,234</p>
</div>
<div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
<h2 class="text-xl font-bold mb-2">Performance</h2>
<p class="text-2xl">78%</p>
</div>
</div>
</div>
</section>Componentes relacionados
Componente del tablero de agricultura de lujo
Un componente de tablero elegante y sofisticado para sitios web de agricultura y ganadería, con un esquema de color blanco y negro con un vibrante acento esmeralda. Incluye métricas clave, actividades recientes y elementos interactivos, diseñados para ser totalmente receptivos y compatibles con el modo oscuro.
Panel de juegos
Un componente de interfaz de usuario de tablero de juegos complejo y receptivo diseñado para el modo oscuro, con un esquema de color en escala de grises. Incluye estadísticas de jugadores, actividad reciente y listas de juegos.
Componente Paneles
Un componente de paneles de control receptivo para aplicaciones de redes sociales con microinteracciones y un esquema de color triádico, construido con Tailwind CSS.