Wunschlisten-Komponente

<div class="p-8 font-sans bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 min-h-screen">
  <h1 class="text-4xl font-extrabold mb-8 text-center text-gray-800 dark:text-white relative">
    <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400 dark:from-purple-300 dark:to-pink-300">My Wishlist</span>
    <div class="absolute inset-0 flex items-center justify-center transform -rotate-3 scale-105 z-[-1] opacity-20">
      <img src="https://picsum.photos/seed/wishlist/800/400" alt="3D background element" class="rounded-3xl shadow-2xl">
    </div>
  </h1>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Wishlist Item 1 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 p-6 border-b-4 border-l-2 border-r-4 border-t-2 border-purple-200 dark:border-purple-600">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-800 dark:to-gray-600 opacity-30 rounded-3xl z-0"></div>
      <div class="relative z-10 flex flex-col items-center">
        <img src="https://picsum.photos/seed/product1/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-purple-100 dark:border-purple-500 transform hover:scale-105 transition-transform">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Pastel Dream Headphones</h2>
        <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Experience serene sound with these beautifully designed pastel headphones. Perfect for relaxation.</p>
        <div class="flex items-center justify-between w-full mb-4">
          <span class="text-2xl font-extrabold text-purple-600 dark:text-purple-300">$129.99</span>
          <div class="relative inline-block w-10 h-10 rounded-full overflow-hidden shadow-lg border-2 border-pink-300 dark:border-pink-500 transform rotate-6">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-pink-100 dark:bg-pink-700 opacity-20"></div>
          </div>
        </div>
        <button class="bg-gradient-to-r from-purple-400 to-pink-400 text-white font-semibold py-3 px-6 rounded-full shadow-lg hover:from-purple-500 hover:to-pink-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 w-full">
          Add to Cart
        </button>
      </div>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 p-6 border-b-4 border-l-2 border-r-4 border-t-2 border-blue-200 dark:border-blue-600">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-green-50 dark:from-gray-800 dark:to-gray-600 opacity-30 rounded-3xl z-0"></div>
      <div class="relative z-10 flex flex-col items-center">
        <img src="https://picsum.photos/seed/product2/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-blue-100 dark:border-blue-500 transform hover:scale-105 transition-transform">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Cloud-Nine Comfort Slippers</h2>
        <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Walk on air with these incredibly soft and stylish pastel slippers.</p>
        <div class="flex items-center justify-between w-full mb-4">
          <span class="text-2xl font-extrabold text-blue-600 dark:text-blue-300">$49.99</span>
          <div class="relative inline-block w-10 h-10 rounded-full overflow-hidden shadow-lg border-2 border-green-300 dark:border-green-500 transform -rotate-6">
            <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-green-100 dark:bg-green-700 opacity-20"></div>
          </div>
        </div>
        <button class="bg-gradient-to-r from-blue-400 to-green-400 text-white font-semibold py-3 px-6 rounded-full shadow-lg hover:from-blue-500 hover:to-green-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700 w-full">
          Add to Cart
        </button>
      </div>
    </div>

    <!-- Wishlist Item 3 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 p-6 border-b-4 border-l-2 border-r-4 border-t-2 border-pink-200 dark:border-pink-600">
      <div class="absolute inset-0 bg-gradient-to-br from-pink-50 to-purple-50 dark:from-gray-800 dark:to-gray-600 opacity-30 rounded-3xl z-0"></div>
      <div class="relative z-10 flex flex-col items-center">
        <img src="https://picsum.photos/seed/product3/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-pink-100 dark:border-pink-500 transform hover:scale-105 transition-transform">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Sunset Hues Scarf</h2>
        <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Wrap yourself in the warm, gentle colors of a sunset with this exquisite scarf.</p>
        <div class="flex items-center justify-between w-full mb-4">
          <span class="text-2xl font-extrabold text-pink-600 dark:text-pink-300">$79.99</span>
          <div class="relative inline-block w-10 h-10 rounded-full overflow-hidden shadow-lg border-2 border-purple-300 dark:border-purple-500 transform rotate-3">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-purple-100 dark:bg-purple-700 opacity-20"></div>
          </div>
        </div>
        <button class="bg-gradient-to-r from-pink-400 to-purple-400 text-white font-semibold py-3 px-6 rounded-full shadow-lg hover:from-pink-500 hover:to-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 w-full">
          Add to Cart
        </button>
      </div>
    </div>

  </div>

</div>