Welcome back! Here’s an overview of your projects.
Total Revenue
$45,231.89
20.1%
from last monthActive Users
2,300
15.3%
from last monthConversion Rate
4.24%
2.1%
from last monthGet started by creating a new report. All your generated documents will appear here.
Un diseño básico que combina una barra lateral izquierda y un encabezado superior, que se usa más comúnmente en aplicaciones SaaS y paneles de administración modernos.
flex-1 y min-w-0. Sólo se desplaza el área de contenido principal, el encabezado y la barra lateral son fijos.nav dentro de aside) y el desplazamiento del contenido principal (main) a la derecha son independientes, por lo que incluso los menús largos no interfieren con la pantalla principal.::-webkit-scrollbar para cambiar la barra de desplazamiento gruesa predeterminada por un diseño más delgado y elegante que reduce el ruido de la interfaz de usuario.bg-slate-50 y bg-white), bordes (border-slate-200) y sombras claras (shadow-sm), los límites de cada sección se expresan de forma natural.w-64 (16rem = 256px) especificado en aside a w-72 o w-56.indigo-600, etc. utilizado en cada ícono y menú activo con el color de su marca (por ejemplo, blue-600 o violet-500).<div class="h-screen w-full overflow-hidden bg-slate-50 text-slate-900 font-sans flex">
<!-- barra lateral -->
<aside class="hidden md:flex flex-col w-64 bg-white border-r border-slate-200 shrink-0">
<div class="h-16 flex items-center px-6 border-b border-slate-200 shrink-0">
<a href="#" class="font-bold text-lg text-indigo-600">NexusApp</a>
</div>
<nav class="flex-1 overflow-y-auto py-4 px-3">
<ul class="space-y-1">
<li>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg bg-indigo-50 text-indigo-600">
Dashboard
</a>
</li>
<li>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-50">
Team
</a>
</li>
</ul>
</nav>
</aside>
<!-- Contenedor principal -->
<div class="flex-1 flex flex-col min-w-0 bg-slate-50">
<!-- Encabezado -->
<header class="h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 bg-white border-b border-slate-200 shadow-sm shrink-0">
<div class="flex items-center gap-4">
<!-- Alternar menú para móvil -->
<button class="md:hidden p-2 text-slate-500 hover:text-slate-900 rounded-md">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
</div>
<div class="flex items-center gap-4">
<button class="p-2 text-slate-400 hover:text-slate-600 rounded-full">
<!-- Notification icons, etc. -->
</button>
<div class="h-8 w-8 rounded-full bg-indigo-500 text-white flex items-center justify-center text-sm font-bold">
JS
</div>
</div>
</header>
<!-- Main content area -->
<main class="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
<div class="max-w-7xl mx-auto">
<!-- Place page-specific content here -->
<h1 class="text-2xl font-bold text-slate-900 mb-6">Dashboard</h1>
</div>
</main>
</div>
</div>flex, flex-1, flex-col) se usa mucho.