<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex flex-col"> <header class="bg-white shadow-lg p-4 flex justify-between items-center"> <div class="flex items-center space-x-4"> <i class="iconoir-calendar text-2xl"></i> <span class="font-bold text-xl">My Calendar</span> </div> <div class="flex items-center space-x-4"> <button class="text-gray-700 hover:text-gray-900"> <i class="iconoir-search text-2xl"></i> </button> <button class="text-gray-700 hover:text-gray-900"> <i class="iconoir-bell text-2xl"></i> </button> <button class="text-gray-700 hover:text-gray-900"> <i class="iconoir-user text-2xl"></i> </button> </div> </header> <div class="flex flex-1 overflow-hidden"> <aside class="bg-white w-64 p-4 border-r overflow-y-auto"> <h2 class="font-bold text-lg mb-4">My Calendars</h2> <ul> <li class="mb-2"> <a href="#" class="flex items-center space-x-2 p-2 hover:bg-gray-200 rounded"> <i class="iconoir-calendar text-xl"></i> <span>Work</span> </a> </li> <li class="mb-2"> <a href="#" class="flex items-center space-x-2 p-2 hover:bg-gray-200 rounded"> <i class="iconoir-calendar text-xl"></i> <span>Personal</span> </a> </li> <li class="mb-2"> <a href="#" class="flex items-center space-x-2 p-2 hover:bg-gray-200 rounded"> <i class="iconoir-calendar text-xl"></i> <span>Holidays</span> </a> </li> </ul> <button class="mt-4 w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-400"> <i class="iconoir-plus text-xl"></i> <span>Add Calendar</span> </button> </aside> <main class="flex-1 flex flex-col"> <div class="flex items-center justify-between p-4 bg-white border-b"> <div class="flex items-center space-x-4"> <button class="text-gray-700 hover:text-gray-900"> <i class="iconoir-arrow-left text-2xl"></i> </button> <h1 class="text-xl font-bold">September 2023</h1> <button class="text-gray-700 hover:text-gray-900"> <i class="iconoir-arrow-right text-2xl"></i> </button> </div> <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-400"> <i class="iconoir-plus text-xl"></i> <span>Add Event</span> </button> </div> <div class="flex-1 p-4 overflow-y-auto"> <div class="grid grid-cols-7 gap-4"> <div class="text-center font-bold">Sun</div> <div class="text-center font-bold">Mon</div> <div class="text-center font-bold">Tue</div> <div class="text-center font-bold">Wed</div> <div class="text-center font-bold">Thu</div> <div class="text-center font-bold">Fri</div> <div class="text-center font-bold">Sat</div> <div class="h-32 border rounded-lg p-2 relative"> <span class="absolute top-1 left-1 bg-blue-500 text-white text-xs rounded px-1">Meeting</span> <p class="mt-6">10:00 AM - 11:00 AM</p> </div> <div class="h-32 border rounded-lg p-2 relative"> <span class="absolute top-1 left-1 bg-green-500 text-white text-xs rounded px-1">Lunch</span> <p class="mt-6">12:30 PM - 1:30 PM</p> </div> <div class="h-32 border rounded-lg p-2 relative"> <span class="absolute top-1 left-1 bg-red-500 text-white text-xs rounded px-1">Doctor's Appointment</span> <p class="mt-6">3:00 PM - 4:00 PM</p> </div> <div class="h-32 border rounded-lg p-2"></div> <div class="h-32 border rounded-lg p-2"></div> <div class="h-32 border rounded-lg p-2"></div> <div class="h-32 border rounded-lg p-2"></div> <div class="h-32 border rounded-lg p-2"></div> <div class="h-32 border rounded-lg p-2 relative"> <span class="absolute top-1 left-1 bg-blue-500 text-white text-xs rounded px-1">Project Deadline</span> <p class="mt-6">5:00 PM</p> </div> <div class="h-32 border rounded-lg p-2"></div> <div class="h-32 border rounded-lg p-2"></div> <div class="h-32 border rounded-lg p-2"></div> <div class="h-32 border rounded-lg p-2"></div> <div class="h-32 border rounded-lg p-2"></div> <div class="h-32 border rounded-lg p-2"></div> <div class="h-32 border rounded-lg p-2"></div> <div class="h-32 border rounded-lg p-2"></div> <div class="h-32 border rounded-lg p-2"></div> <div class="h-32 border rounded-lg p-2"></div> <div class="h-32 border rounded-lg p-2"></div> <div class="h-32 border rounded-lg p-2"></div> </div> </div> </main> </div> </body>