Glassmorphism 사용자 프로필 구성 요소(단순)

<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="w-full max-w-sm p-6 rounded-3xl shadow-xl backdrop-blur-md bg-white/30 dark:bg-gray-800/30 border border-white/50 dark:border-gray-700/50 relative overflow-hidden">
    
    <!-- Background Blur Effect (for glassmorphism) -->
    <div class="absolute inset-0 z-0 opacity-50 dark:opacity-20">
      <div class="absolute top-0 left-0 w-32 h-32 bg-purple-300 dark:bg-purple-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:animate-blob-dark"></div>
      <div class="absolute top-0 right-0 w-32 h-32 bg-pink-300 dark:bg-pink-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:animate-blob-dark dark:animation-delay-2000"></div>
      <div class="absolute bottom-0 left-1/2 w-32 h-32 bg-blue-300 dark:bg-blue-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:animate-blob-dark dark:animation-delay-4000"></div>
    </div>

    <div class="relative z-10 flex flex-col items-center text-center">
      <img class="w-24 h-24 rounded-full border-4 border-white/70 dark:border-gray-600/70 shadow-lg object-cover mb-4"
        src="https://randomuser.me/api/portraits/women/68.jpg"
        alt="User Avatar">

      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-1 tracking-wide">
        Alice Johnson
      </h2>
      <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 font-medium">
        Premium User
      </p>

      <div class="flex space-x-6 mb-6">
        <div class="flex flex-col items-center">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">1.2K</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">Followers</span>
        </div>
        <div class="flex flex-col items-center">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">500</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">Following</span>
        </div>
        <div class="flex flex-col items-center">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">25</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">Playlists</span>
        </div>
      </div>

      <button class="w-full py-3 px-6 rounded-xl bg-gradient-to-r from-purple-400 to-pink-400 dark:from-purple-600 dark:to-pink-600 
                     text-white font-semibold text-lg shadow-md 
                     hover:from-purple-500 hover:to-pink-500 dark:hover:from-purple-700 dark:hover:to-pink-700 
                     focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-300 dark:focus:ring-offset-gray-800 dark:focus:ring-purple-700/50 
                     transition-all duration-300 transform hover:-translate-y-0.5">
        View Profile
      </button>
    </div>
  </div>
</div>

<!-- To make the background blobs animate, you'd typically add a CSS @keyframes in a <style> tag or global CSS. For Tailwind, you can extend the config. -->
<!-- Example for tailwind.config.js (not part of the HTML output, but for context): -->
<!--
  theme: {
    extend: {
      keyframes: {
        blob: {
          '0%, 100%': {
            transform: 'translate(0px, 0px) scale(1)'
          },
          '33%': {
            transform: 'translate(30px, -50px) scale(1.1)'
          },
          '66%': {
            transform: 'translate(-20px, 20px) scale(0.9)'
          }
        }
      },
      animation: {
        blob: 'blob 7s infinite ease-in-out',
        'blob-dark': 'blob 10s infinite ease-in-out'
      }
    }
  }
-->