Bookings List

<div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800"> <div class="rounded-2xl bg-white shadow-md w-full p-6 max-w-2xl"> <h1 class="text-lg font-semibold">Bookings</h1> <h1 class="text-gray-400 mb-4">Manage all the bookings in your houses</h1> <ul> <li class="flex gap-4 items-center py-4 border-b"><img src="https://i.pravatar.cc/50?img=5" class="rounded-full"> <div class="flex-1 mx-4"> <h2>Dayna Skiles</h2> <p class="text-gray-400">[email protected]</p> </div> <div class="flex-1"> <div>Dec 24 - Dec 26</div> <p class="text-gray-400">2 nights</p> </div><button class="ml-2 px-4 py-2 rounded bg-blue-100 text-blue-600 border border-transparent hover:border-blue-500">Respond</button> </li> <li class="flex gap-4 items-center py-4 border-b"><img src="https://i.pravatar.cc/50?img=7" class="rounded-full"> <div class="flex-1 mx-4"> <h2>Maximus Marks</h2> <p class="text-gray-400">[email protected]</p> </div> <div class="flex-1"> <div>Dec 4 - Dec 12</div> <p class="text-gray-400">8 nights</p> </div><button class="ml-2 px-4 py-2 rounded bg-green-100 text-green-600">Accepted</button> </li> <li class="flex gap-4 items-center py-4 border-b"><img src="https://i.pravatar.cc/50?img=9" class="rounded-full"> <div class="flex-1 mx-4"> <h2>Daphney Kessler</h2> <p class="text-gray-400">[email protected]</p> </div> <div class="flex-1"> <div>Nov 14 - Nov 17</div> <p class="text-gray-400">3 nights</p> </div><button class="ml-2 px-4 py-2 rounded bg-red-100 text-red-600">Cancelled</button> </li> </ul> </div> </div>