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="max-w-md w-full mx-auto p-6 md:p-8 rounded-xl shadow-2xl backdrop-blur-md bg-white/30 dark:bg-blue-900/30 border border-white/40 dark:border-blue-700/40 transform scale-100 transition-all duration-300 hover:scale-[1.01]">
    <h2 class="text-2xl md:text-3xl font-extrabold text-blue-900 dark:text-blue-100 mb-6 text-center tracking-tight drop-shadow-sm">Your Wishlist</h2>

    <div class="space-y-4">

      <!-- Item 1 -->
      <div class="flex items-center p-3 rounded-lg bg-white/40 dark:bg-blue-800/40 backdrop-blur-sm border border-white/50 dark:border-blue-700/50 shadow-md transform hover:scale-[1.02] transition-transform duration-200">
        <img src="https://picsum.photos/id/1043/80/80" alt="Album Cover" class="w-16 h-16 md:w-20 md:h-20 rounded-lg object-cover shadow-sm flex-shrink-0">
        <div class="ml-4 flex-grow">
          <p class="text-lg font-semibold text-blue-800 dark:text-blue-100 line-clamp-1">Ocean Dreams</p>
          <p class="text-sm text-blue-700 dark:text-blue-200 mt-0.5 line-clamp-1">Artist Name Here</p>
        </div>
        <button class="ml-4 p-2 rounded-full text-blue-600 dark:text-blue-200 hover:bg-blue-200/50 dark:hover:bg-blue-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transition-colors duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Item 2 -->
      <div class="flex items-center p-3 rounded-lg bg-white/40 dark:bg-blue-800/40 backdrop-blur-sm border border-white/50 dark:border-blue-700/50 shadow-md transform hover:scale-[1.02] transition-transform duration-200">
        <img src="https://picsum.photos/id/10/80/80" alt="Album Cover" class="w-16 h-16 md:w-20 md:h-20 rounded-lg object-cover shadow-sm flex-shrink-0">
        <div class="ml-4 flex-grow">
          <p class="text-lg font-semibold text-blue-800 dark:text-blue-100 line-clamp-1">City Lights</p>
          <p class="text-sm text-blue-700 dark:text-blue-200 mt-0.5 line-clamp-1">Another Band Project</p>
        </div>
        <button class="ml-4 p-2 rounded-full text-blue-600 dark:text-blue-200 hover:bg-blue-200/50 dark:hover:bg-blue-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transition-colors duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Item 3 -->
      <div class="flex items-center p-3 rounded-lg bg-white/40 dark:bg-blue-800/40 backdrop-blur-sm border border-white/50 dark:border-blue-700/50 shadow-md transform hover:scale-[1.02] transition-transform duration-200">
        <img src="https://picsum.photos/id/1018/80/80" alt="Album Cover" class="w-16 h-16 md:w-20 md:h-20 rounded-lg object-cover shadow-sm flex-shrink-0">
        <div class="ml-4 flex-grow">
          <p class="text-lg font-semibold text-blue-800 dark:text-blue-100 line-clamp-1">Whispering Woods</p>
          <p class="text-sm text-blue-700 dark:text-blue-200 mt-0.5 line-clamp-1">The Soloist</p>
        </div>
        <button class="ml-4 p-2 rounded-full text-blue-600 dark:text-blue-200 hover:bg-blue-200/50 dark:hover:bg-blue-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transition-colors duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

    </div>

    <p class="text-center text-sm text-blue-800 dark:text-blue-200 mt-8 opacity-70">Saved your favorite tracks.</p>
  </div>
</div>