Glassmorphism Maps Component

<div class="glassmorphism-maps-component relative h-96 overflow-hidden rounded-lg shadow-xl bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg">
  <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://picsum.photos/800/600');"></div>
  <div class="relative h-full flex flex-col justify-between p-6 bg-white bg-opacity-10 dark:bg-gray-900 dark:bg-opacity-10">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
        <p class="text-gray-600 dark:text-gray-300 text-sm">📍 On an adventure</p>
      </div>
    </div>
    <div class="text-right">
      <button class="px-4 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-500">
        View Location
      </button>
    </div>
  </div>
</div>