Layout Components 컴포넌트
어두운 테마가 있는 반응형 대시보드 레이아웃 구성 요소로, 사이드바와 기본 콘텐츠 영역을 제공합니다. 시각적 호소력을 위해 트라이어드 색 구성표를 사용합니다.
HTML 코드
<div class="min-h-screen flex flex-col bg-gray-900 text-gray-200">
<!-- Header -->
<header class="flex items-center justify-between p-4 bg-gray-800 shadow-md">
<h1 class="text-2xl font-bold text-cyan-400">Dashboard</h1>
<nav>
<ul class="flex space-x-4">
<li><a href="#" class="text-orange-400 hover:text-orange-300">Home</a></li>
<li><a href="#" class="text-orange-400 hover:text-orange-300">Settings</a></li>
<li><a href="#" class="text-orange-400 hover:text-orange-300">Profile</a></li>
</ul>
</nav>
</header>
<!-- Main Content Area -->
<div class="flex flex-1 flex-col md:flex-row">
<!-- Sidebar -->
<aside class="w-full md:w-64 bg-gray-800 p-4 shadow-lg">
<nav>
<ul class="space-y-4">
<li><a href="#" class="block text-lime-400 hover:text-lime-300">Overview</a></li>
<li><a href="#" class="block text-lime-400 hover:text-lime-300">Analytics</a></li>
<li><a href="#" class="block text-lime-400 hover:text-lime-300">Reports</a></li>
<li><a href="#" class="block text-lime-400 hover:text-lime-300">Users</a></li>
</ul>
</nav>
</aside>
<!-- Content -->
<main class="flex-1 p-6">
<h2 class="text-3xl font-semibold mb-6 text-cyan-400">Welcome to your Dashboard</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
<h3 class="text-xl font-bold mb-2 text-orange-400">Total Sales</h3>
<p class="text-3xl font-bold text-gray-100">$12,345</p>
</div>
<!-- Card 2 -->
<div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
<h3 class="text-xl font-bold mb-2 text-lime-400">New Customers</h3>
<p class="text-3xl font-bold text-gray-100">256</p>
</div>
<!-- Card 3 -->
<div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
<h3 class="text-xl font-bold mb-2 text-cyan-400">Page Views</h3>
<p class="text-3xl font-bold text-gray-100">8,765</p>
</div>
</div>
<!-- Example Data Table -->
<div class="mt-8 bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
<h3 class="text-xl font-bold mb-4 text-cyan-400">Recent Orders</h3>
<div class="overflow-x-auto">
<table class="min-w-full leading-normal">
<thead>
<tr>
<th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Order ID</th>
<th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Product</th>
<th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Amount</th>
<th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1001</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-lime-400">Laptop Pro</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$999</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-green-400">Completed</td>
</tr>
<tr>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1002</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-orange-400">Mechanical Keyboard</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$120</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-amber-400">Pending</td>
</tr>
<tr>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1003</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-cyan-400">Wireless Mouse</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$50</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-green-400">Completed</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
</div>