<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>