User Profiles Component

<div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-gray-900 dark:to-slate-950 p-6 sm:p-10 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-sm mx-auto overflow-hidden rounded-xl shadow-2xl relative bg-white dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-80 backdrop-filter backdrop-blur-sm">
    <!-- Artistic background layer -->
    <div class="absolute inset-0 bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-300 dark:from-pink-700 dark:via-purple-700 dark:to-indigo-700 opacity-60 dark:opacity-40 filter blur-xl animate-gradient-xy"></div>
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/water-color.png')] opacity-10 dark:opacity-5"></div>

    <div class="relative p-6 sm:p-8 text-center">
      <!-- Profile Image -->
      <div class="w-28 h-28 mx-auto -mt-4 mb-4 rounded-full overflow-hidden border-4 border-white dark:border-gray-700 shadow-lg transform transition-transform duration-300 hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile Picture" class="w-full h-full object-cover">
      </div>

      <!-- User Name -->
      <h2 class="text-2xl sm:text-3xl font-extrabold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 dark:from-purple-400 dark:via-pink-400 dark:to-red-400">
        Elara Vance
      </h2>

      <!-- User Title/Location -->
      <p class="text-base sm:text-lg font-medium mb-4 text-gray-600 dark:text-gray-300">
        Wanderlust Explorer | Paris, France
      </p>

      <!-- Short Bio/Quote -->
      <p class="text-sm italic mb-6 text-gray-700 dark:text-gray-400 leading-relaxed">
        "Collecting moments, not things. Always seeking the next adventure."
      </p>

      <!-- Stats/Badges Placeholder (Optional for simple design) -->
      <div class="flex justify-center flex-wrap gap-3 mb-6">
        <span class="px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-blue-400 to-cyan-400 text-white shadow-md transition-all duration-300 hover:scale-105">50+ Trips</span>
        <span class="px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-green-400 to-lime-400 text-white shadow-md transition-all duration-300 hover:scale-105">Pro Photographer</span>
      </div>

      <!-- Call to Action / Button -->
      <button class="w-full py-3 px-6 rounded-full text-white font-bold text-lg 
                     bg-gradient-to-r from-teal-500 to-blue-600 
                     hover:from-teal-600 hover:to-blue-700 
                     dark:from-teal-600 dark:to-blue-700 
                     dark:hover:from-teal-700 dark:hover:to-blue-800 
                     shadow-lg transform transition-all duration-300 
                     hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-4 
                     focus:ring-blue-300 dark:focus:ring-blue-800">
        View Travel Journal
      </button>
    </div>
  </div>

  <style>
    @keyframes gradient-xy {
      0% {
        background-position: 0% 0%;
      }
      50% {
        background-position: 100% 100%;
      }
      100% {
        background-position: 0% 0%;
      }
    }

    .animate-gradient-xy {
      background-size: 400% 400%;
      animation: gradient-xy 15s ease infinite;
    }
  </style>
</div>