Компонент списка желаний

<div class="font-mono bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-4xl font-bold text-purple-700 dark:text-purple-300 mb-8 text-center">My Wishlist</h1>

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

      <!-- Wishlist Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
        <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
        <div class="p-6">
          <h2 class="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">Retro Analog Camera</h2>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Capture memories in true vintage style. Limited stock!</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-red-500 dark:text-red-400">$129.99</span>
            <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
        <img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
        <div class="p-6">
          <h2 class="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">Classic Vinyl Player</h2>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Experience the warm, rich sound of vinyl records like never before.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-red-500 dark:text-red-400">$89.50</span>
            <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
        <img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
        <div class="p-6">
          <h2 class="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">Vintage Desk Lamp</h2>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Illuminate your workspace with a touch of timeless elegance.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-red-500 dark:text-red-400">$39.99</span>
            <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300">Add to Cart</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>