function App() {
  return (
  <>
  <div class="p-6 bg-gray-100 min-h-screen">
  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mb-6">
    <div class="bg-red-500 text-white rounded-2xl shadow-md p-5 flex items-center justify-between">
      <div>
        <p class="text-sm opacity-90">Total Employees</p>
        <h2 class="text-3xl font-bold mt-1">125</h2>
      </div>
      <div class="text-4xl opacity-90">👥</div>
    </div>

    <div class="bg-blue-500 text-white rounded-2xl shadow-md p-5 flex items-center justify-between">
      <div>
        <p class="text-sm opacity-90">Departments</p>
        <h2 class="text-3xl font-bold mt-1">8</h2>
      </div>
      <div class="text-4xl opacity-90">🏢</div>
    </div>

    <div class="bg-green-500 text-white rounded-2xl shadow-md p-5 flex items-center justify-between">
      <div>
        <p class="text-sm opacity-90">Attendance Today</p>
        <h2 class="text-3xl font-bold mt-1">113</h2>
      </div>
      <div class="text-4xl opacity-90">🕒</div>
    </div>

    <div class="bg-yellow-500 text-white rounded-2xl shadow-md p-5 flex items-center justify-between">
      <div>
        <p class="text-sm opacity-90">Pending Payroll</p>
        <h2 class="text-3xl font-bold mt-1">12</h2>
      </div>
      <div class="text-4xl opacity-90">💼</div>
    </div>
  </div>

  <div class="grid grid-cols-1 xl:grid-cols-3 gap-6 mb-6">
    <div class="bg-white rounded-2xl shadow-sm p-5">
      <h3 class="text-lg font-bold text-gray-800 mb-4">Monthly Attendance</h3>
      <div class="h-72 flex items-end justify-between gap-3 border-t pt-6">
        <div class="flex flex-col items-center w-full">
          <div class="flex items-end gap-1 h-52">
            <div class="w-4 bg-green-600 rounded-t-md h-24"></div>
            <div class="w-4 bg-green-400 rounded-t-md h-16"></div>
            <div class="w-4 bg-slate-400 rounded-t-md h-28"></div>
          </div>
          <span class="text-xs text-gray-500 mt-2">Jan</span>
        </div>

        <div class="flex flex-col items-center w-full">
          <div class="flex items-end gap-1 h-52">
            <div class="w-4 bg-green-600 rounded-t-md h-32"></div>
            <div class="w-4 bg-green-400 rounded-t-md h-24"></div>
            <div class="w-4 bg-slate-400 rounded-t-md h-36"></div>
          </div>
          <span class="text-xs text-gray-500 mt-2">Feb</span>
        </div>

        <div class="flex flex-col items-center w-full">
          <div class="flex items-end gap-1 h-52">
            <div class="w-4 bg-green-600 rounded-t-md h-28"></div>
            <div class="w-4 bg-green-400 rounded-t-md h-20"></div>
            <div class="w-4 bg-slate-400 rounded-t-md h-30"></div>
          </div>
          <span class="text-xs text-gray-500 mt-2">Mar</span>
        </div>

        <div class="flex flex-col items-center w-full">
          <div class="flex items-end gap-1 h-52">
            <div class="w-4 bg-green-600 rounded-t-md h-20"></div>
            <div class="w-4 bg-green-400 rounded-t-md h-24"></div>
            <div class="w-4 bg-slate-400 rounded-t-md h-24"></div>
          </div>
          <span class="text-xs text-gray-500 mt-2">Apr</span>
        </div>

        <div class="flex flex-col items-center w-full">
          <div class="flex items-end gap-1 h-52">
            <div class="w-4 bg-green-600 rounded-t-md h-32"></div>
            <div class="w-4 bg-green-400 rounded-t-md h-16"></div>
            <div class="w-4 bg-slate-400 rounded-t-md h-36"></div>
          </div>
          <span class="text-xs text-gray-500 mt-2">May</span>
        </div>

        <div class="flex flex-col items-center w-full">
          <div class="flex items-end gap-1 h-52">
            <div class="w-4 bg-green-600 rounded-t-md h-28"></div>
            <div class="w-4 bg-green-400 rounded-t-md h-20"></div>
            <div class="w-4 bg-slate-400 rounded-t-md h-30"></div>
          </div>
          <span class="text-xs text-gray-500 mt-2">Jun</span>
        </div>

        <div class="flex flex-col items-center w-full">
          <div class="flex items-end gap-1 h-52">
            <div class="w-4 bg-green-600 rounded-t-md h-36"></div>
            <div class="w-4 bg-green-400 rounded-t-md h-28"></div>
            <div class="w-4 bg-slate-400 rounded-t-md h-40"></div>
          </div>
          <span class="text-xs text-gray-500 mt-2">Jul</span>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-2xl shadow-sm p-5">
      <h3 class="text-lg font-bold text-gray-800 mb-4">Expense Breakdown</h3>
      <div class="flex flex-col items-center justify-center h-72">
        <div class="relative w-56 h-56 rounded-full bg-[conic-gradient(#3b82f6_0%_45%,#f97316_45%_60%,#16a34a_60%_85%,#facc15_85%_100%)]">
          <div class="absolute inset-10 bg-white rounded-full flex items-center justify-center text-center">
            <div>
              <p class="text-sm text-gray-500">Salaries</p>
              <h4 class="text-2xl font-bold text-blue-600">45%</h4>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-2xl shadow-sm p-5">
      <h3 class="text-lg font-bold text-gray-800 mb-4">Recent Activities</h3>
      <div class="space-y-4">
        <div class="flex items-center justify-between border-b pb-3">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-lg">👨</div>
            <p class="text-sm text-gray-700">John Doe added a new employee</p>
          </div>
          <span class="text-xs text-gray-500">5 mins ago</span>
        </div>

        <div class="flex items-center justify-between border-b pb-3">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-lg">👩</div>
            <p class="text-sm text-gray-700">Payroll processed for June</p>
          </div>
          <span class="text-xs text-gray-500">30 mins ago</span>
        </div>

        <div class="flex items-center justify-between border-b pb-3">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-lg">🧑</div>
            <p class="text-sm text-gray-700">Finance report updated</p>
          </div>
          <span class="text-xs text-gray-500">1 hour ago</span>
        </div>
      </div>

      <button class="mt-5 w-full bg-slate-100 hover:bg-slate-200 text-slate-700 py-2.5 rounded-xl font-medium transition">
        🔔 New Notifications
      </button>
    </div>
  </div>
</div>
</>
);
}

export default App;
