Bauhaus 위시리스트 컴포넌트

<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 sm:mb-8 text-center uppercase tracking-wider">
      My Wishlist
    </h2>

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

      <!-- Wishlist Item 1 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-sm shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
        <button class="absolute top-3 right-3 text-red-500 dark:text-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200" aria-label="Remove item from wishlist">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 fill-current" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        <a href="#" class="block">
          <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
          <div class="p-4 text-center">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1 line-clamp-1">Minimalist Blue Dress</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Fashion Apparel</p>
            <p class="text-xl font-bold text-gray-900 dark:text-gray-50">$89.00</p>
          </div>
        </a>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-sm shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
        <button class="absolute top-3 right-3 text-red-500 dark:text-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200" aria-label="Remove item from wishlist">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 fill-current" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        <a href="#" class="block">
          <img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
          <div class="p-4 text-center">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1 line-clamp-1">Geometric Earrings</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Jewelry</p>
            <p class="text-xl font-bold text-gray-900 dark:text-gray-50">$35.00</p>
          </div>
        </a>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-sm shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
        <button class="absolute top-3 right-3 text-red-500 dark:text-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200" aria-label="Remove item from wishlist">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 fill-current" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        <a href="#" class="block">
          <img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
          <div class="p-4 text-center">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1 line-clamp-1">Bauhaus Inspired Skirt</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Fashion Apparel</p>
            <p class="text-xl font-bold text-gray-900 dark:text-gray-50">$75.00</p>
          </div>
        </a>
      </div>

      <!-- Wishlist Item 4 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-sm shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
        <button class="absolute top-3 right-3 text-red-500 dark:text-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200" aria-label="Remove item from wishlist">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 fill-current" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        <a href="#" class="block">
          <img src="https://picsum.photos/400/300?random=4" alt="Product Image" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
          <div class="p-4 text-center">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1 line-clamp-1">Abstract Print Scarf</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Accessories</p>
            <p class="text-xl font-bold text-gray-900 dark:text-gray-50">$29.00</p>
          </div>
        </a>
      </div>

    </div>

    <!-- Empty State / Call to Action -->
    <div class="mt-12 text-center">
      <p class="text-gray-600 dark:text-gray-400 text-lg mb-4">Ready to add more beauty to your life? Explore our collections!</p>
      <a href="#" class="inline-block px-8 py-3 bg-gray-800 hover:bg-gray-900 dark:bg-gray-100 dark:hover:bg-gray-200 text-white dark:text-gray-900 font-bold uppercase tracking-wide text-sm rounded-sm transition-colors duration-300 ease-in-out shadow-lg">
        Shop Now
      </a>
    </div>
  </div>
</div>