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.
Bố cục cơ bản kết hợp thanh bên trái và tiêu đề trên cùng, được sử dụng phổ biến nhất trong các ứng dụng SaaS hiện đại và Bảng điều khiển dành cho quản trị viên.
flex-1 và min-w-0. Chỉ cuộn khu vực nội dung chính, tiêu đề và thanh bên là cố định.nav trong aside) và cuộn nội dung chính (main) ở bên phải là độc lập nên ngay cả các menu dài cũng không ảnh hưởng đến màn hình chính.::-webkit-scrollbar để thay đổi thanh cuộn dày mặc định thành thiết kế mỏng hơn, đẹp hơn nhằm giảm nhiễu giao diện người dùng.bg-slate-50 và bg-white), đường viền (border-slate-200) và bóng sáng (shadow-sm), ranh giới của từng phần được thể hiện một cách tự nhiên.w-64 (16rem = 256px) được chỉ định trong aside thành w-72 hoặc w-56.header và vùng logo ở đầu thanh bên từ h-16 (4rem = 64px) thành h-14, v.v.indigo-600, v.v. được sử dụng trong mỗi biểu tượng và menu đang hoạt động bằng màu thương hiệu của bạn (ví dụ: blue-600 hoặc violet-500).<div class="h-screen w-full overflow-hidden bg-slate-50 text-slate-900 font-sans flex">
<!-- thanh bên -->
<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>
<!-- Thùng chứa chính -->
<div class="flex-1 flex flex-col min-w-0 bg-slate-50">
<!-- Tiêu đề -->
<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">
<!-- Chuyển đổi menu cho thiết bị di động -->
<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) được sử dụng nhiều.