Wunschlisten-Komponente

<div class="font-sans antialiased text-gray-800 bg-white dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 min-h-screen">

  <div class="max-w-7xl mx-auto">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-center mb-8 sm:mb-12 text-blue-700 dark:text-blue-400">
      Your Impact Wishlist
    </h1>

    <p class="text-center text-lg mb-8 sm:mb-10 max-w-2xl mx-auto leading-relaxed text-gray-600 dark:text-gray-300">
      Every item on this wishlist represents a tangible way you can make a difference. Choose what resonates most with you.
    </p>

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

      <!-- Wishlist Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/1025/400/250" alt="Community Garden" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Support a Community Garden</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Provide tools, seeds, and irrigation for a sustainable community garden that feeds local families and teaches valuable skills.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $500</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$310 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 62%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/237/400/250" alt="School Supplies" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Back-to-School Kits for Children</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Fund essential school supplies, backpacks, and learning materials for underprivileged students, setting them up for success.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $750</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$150 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 20%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/292/400/250" alt="Medical Aid" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Essential Medical Supplies</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Provide vital medicines, bandages, and hygiene kits to communities lacking access to basic healthcare.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $1200</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$900 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 75%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

      <!-- Wishlist Item 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/1015/400/250" alt="Clean Water Access" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Access to Clean Drinking Water</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Fund the drilling of new wells and water purification systems, bringing safe hydration to remote villages.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $2000</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$1000 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 50%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

      <!-- Wishlist Item 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/1074/400/250" alt="Animal Shelter Support" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Support for Animal Shelters</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Help provide food, veterinary care, and comfortable habitats for rescued animals awaiting adoption.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $600</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$420 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 70%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

      <!-- Wishlist Item 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/1084/400/250" alt="Elderly Care" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Warm Meals for Seniors</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Provide nutritious, hot meals and friendly visits to elderly individuals who are homebound or facing food insecurity.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $900</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$540 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 60%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

    </div>

    <div class="text-center mt-12 sm:mt-16">
      <a href="#" class="inline-block bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-full text-lg transition-colors duration-300 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 dark:bg-green-500 dark:hover:bg-green-600">
        Explore More Ways to Help
      </a>
    </div>
  </div>
</div>