📊 Thiết Kế Giao Diện UI cho Dashboard Admin bằng Tailwind CSS

<div class="flex min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white">
  <!-- Sidebar -->
  <aside class="w-64 bg-white dark:bg-gray-800 p-6 hidden md:block">
    <h2 class="text-xl font-bold mb-6">📁 Admin Panel</h2>
    <nav class="space-y-4">
      <a href="#" class="block hover:text-blue-600">Dashboard</a>
      <a href="#" class="block hover:text-blue-600">Người dùng</a>
      <a href="#" class="block hover:text-blue-600">Sản phẩm</a>
      <a href="#" class="block hover:text-blue-600">Báo cáo</a>
    </nav>
  </aside>

  <!-- Nội dung chính -->
  <main class="flex-1 p-6">
    <!-- Navbar -->
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-bold">📊 Dashboard</h1>
      <button onclick="document.documentElement.classList.toggle('dark')" class="bg-gray-200 dark:bg-gray-700 px-3 py-1 rounded">🌓</button>
    </div>

    <!-- Content -->
    <!-- Cards, Charts, Table... -->
  </main>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
  <div class="bg-white dark:bg-gray-800 p-4 rounded shadow hover:shadow-md transition">
    <h3 class="text-sm text-gray-500">Người dùng mới</h3>
    <p class="text-2xl font-bold mt-1">1,254</p>
  </div>

  <div class="bg-white dark:bg-gray-800 p-4 rounded shadow hover:shadow-md transition">
    <h3 class="text-sm text-gray-500">Đơn hàng</h3>
    <p class="text-2xl font-bold mt-1">732</p>
  </div>

  <div class="bg-white dark:bg-gray-800 p-4 rounded shadow hover:shadow-md transition">
    <h3 class="text-sm text-gray-500">Lượt truy cập</h3>
    <p class="text-2xl font-bold mt-1">8,390</p>
  </div>

  <div class="bg-white dark:bg-gray-800 p-4 rounded shadow hover:shadow-md transition">
    <h3 class="text-sm text-gray-500">Doanh thu</h3>
    <p class="text-2xl font-bold mt-1">$12,940</p>
  </div>
</div>

<div class="bg-white dark:bg-gray-800 p-6 rounded shadow mb-8">
  <h4 class="text-lg font-semibold mb-4">Doanh thu theo tháng</h4>
  <canvas id="revenueChart" height="100"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('revenueChart').getContext('2d');
  new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['Tháng 1', '2', '3', '4', '5'],
      datasets: [{
        label: 'Doanh thu',
        data: [3000, 5000, 4000, 6000, 7500],
        borderColor: '#3B82F6',
        fill: false
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { display: false }
      }
    }
  });
</script>

<div class="overflow-x-auto bg-white dark:bg-gray-800 rounded shadow">
  <table class="min-w-full text-sm">
    <thead>
      <tr class="bg-gray-200 dark:bg-gray-700">
        <th class="px-4 py-2 text-left">Người dùng</th>
        <th class="px-4 py-2 text-left">Email</th>
        <th class="px-4 py-2 text-left">Trạng thái</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-t border-gray-300 dark:border-gray-700">
        <td class="px-4 py-2">Nguyễn Văn A</td>
        <td class="px-4 py-2">a.nguyen@example.com</td>
        <td class="px-4 py-2"><span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">Hoạt động</span></td>
      </tr>
      <!-- thêm dòng khác -->
    </tbody>
  </table>
</div>

<!-- Nút toggle -->
<button onclick="document.getElementById('sidebar').classList.toggle('hidden')" class="md:hidden p-2">
  ☰
</button>

<!-- Sidebar có id -->
<aside id="sidebar" class="hidden md:block w-64 fixed z-20 bg-white dark:bg-gray-800 p-6 h-full">
  <!-- ... -->
</aside>