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>