Wishlist Component

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-blue-950 min-h-screen font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden transition-all duration-300 ease-in-out">
    <div class="p-6 sm:p-8 bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-sky-700 dark:to-indigo-700 text-white">
      <h2 class="text-2xl sm:text-3xl font-bold mb-2">Your Wishlist</h2>
      <p class="text-indigo-100 dark:text-sky-100 text-base sm:text-lg">Keep track of items you love and might want later.</p>
    </div>

    <div class="divide-y divide-gray-200 dark:divide-gray-700">
      <!-- Wishlist Item 1 -->
      <div class="flex flex-col sm:flex-row items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
        <img src="https://picsum.photos/seed/wishlist1/100/100" alt="Product image" class="w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0 object-cover rounded-md shadow-sm mb-4 sm:mb-0 sm:mr-6">
        <div class="flex-grow text-center sm:text-left">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1">Premium Wireless Earbuds</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Crystal-clear sound and ergonomic design.</p>
          <span class="text-xl font-bold text-indigo-600 dark:text-teal-400">$129.99</span>
        </div>
        <div class="mt-4 sm:mt-0 sm:ml-4 flex-shrink-0">
          <button class="px-4 py-2 sm:px-5 sm:py-2.5 bg-indigo-500 hover:bg-indigo-600 dark:bg-sky-600 dark:hover:bg-sky-700 text-white rounded-md text-sm font-medium transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-sky-500 dark:focus:ring-offset-gray-800">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="flex flex-col sm:flex-row items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
        <img src="https://picsum.photos/seed/wishlist2/100/100" alt="Product image" class="w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0 object-cover rounded-md shadow-sm mb-4 sm:mb-0 sm:mr-6">
        <div class="flex-grow text-center sm:text-left">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1">Ergonomic Desk Chair</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Ultimate comfort for long working hours.</p>
          <span class="text-xl font-bold text-indigo-600 dark:text-teal-400">$349.00</span>
        </div>
        <div class="mt-4 sm:mt-0 sm:ml-4 flex-shrink-0">
          <button class="px-4 py-2 sm:px-5 sm:py-2.5 bg-indigo-500 hover:bg-indigo-600 dark:bg-sky-600 dark:hover:bg-sky-700 text-white rounded-md text-sm font-medium transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-sky-500 dark:focus:ring-offset-gray-800">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="flex flex-col sm:flex-row items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
        <img src="https://picsum.photos/seed/wishlist3/100/100" alt="Product image" class="w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0 object-cover rounded-md shadow-sm mb-4 sm:mb-0 sm:mr-6">
        <div class="flex-grow text-center sm:text-left">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1">Smart Home Hub</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Connect and control all your smart devices.</p>
          <span class="text-xl font-bold text-indigo-600 dark:text-teal-400">$89.50</span>
        </div>
        <div class="mt-4 sm:mt-0 sm:ml-4 flex-shrink-0">
          <button class="px-4 py-2 sm:px-5 sm:py-2.5 bg-indigo-500 hover:bg-indigo-600 dark:bg-sky-600 dark:hover:bg-sky-700 text-white rounded-md text-sm font-medium transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-sky-500 dark:focus:ring-offset-gray-800">
            Add to Cart
          </button>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 border-t border-gray-200 dark:border-gray-700 flex justify-end bg-gray-50 dark:bg-gray-800">
      <button class="px-6 py-3 bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white font-semibold rounded-md shadow-lg transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-pink-500 dark:focus:ring-offset-gray-800">
        Clear Wishlist
      </button>
    </div>
  </div>
</div>