Glassmorphism ウィッシュリストコンポーネント - 農業/農業

<div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-gray-900 dark:via-zinc-800 dark:to-slate-900 transition-all duration-500">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl sm:text-5xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center drop-shadow-lg">
      Your Harvest Wishlist
    </h1>

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

      <!-- Wishlist Item 1 -->
      <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden bg-white/30 dark:bg-gray-800/30 backdrop-blur-xl border border-white/50 dark:border-gray-700/50 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200/50 to-pink-200/50 dark:from-purple-800/50 dark:to-pink-800/50 opacity-30 blur-2xl -z-10"></div>
        <img src="https://picsum.photos/id/102/400/250" alt="Organic Carrots" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-white/50 dark:border-gray-700/50">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Heirloom Carrots</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-4 line-clamp-3">Sweet and vibrant heirloom carrots, perfect for fresh eating or roasting. Organically grown with care.</p>
        <div class="flex items-center justify-between text-gray-800 dark:text-gray-200 mb-4">
          <span class="block text-lg font-bold text-green-700 dark:text-green-400">$4.50 / lb</span>
          <div class="flex items-center space-x-1">
            <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-sm">4.8 (120)</span>
          </div>
        </div>
        <div class="flex gap-3">
          <button class="flex-1 py-3 px-4 rounded-xl bg-gradient-to-r from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 text-white font-semibold shadow-md hover:from-green-500 hover:to-green-700 dark:hover:from-green-700 dark:hover:to-green-900 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
            Add to Cart
          </button>
          <button class="p-3 rounded-xl bg-white/50 dark:bg-gray-700/50 border border-white/50 dark:border-gray-600/50 text-gray-700 dark:text-gray-200 hover:bg-gray-100/50 dark:hover:bg-gray-600/50 shadow-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
          </button>
        </div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden bg-white/30 dark:bg-gray-800/30 backdrop-blur-xl border border-white/50 dark:border-gray-700/50 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-200/50 to-green-200/50 dark:from-blue-800/50 dark:to-green-800/50 opacity-30 blur-2xl -z-10"></div>
        <img src="https://picsum.photos/id/1080/400/250" alt="Fresh Tomatoes" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-white/50 dark:border-gray-700/50">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Vine-Ripened Tomatoes</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-4 line-clamp-3">Juicy and flavorful tomatoes, ripened on the vine for peak taste. Ideal for salads or sauces.</p>
        <div class="flex items-center justify-between text-gray-800 dark:text-gray-200 mb-4">
          <span class="block text-lg font-bold text-green-700 dark:text-green-400">$3.75 / lb</span>
          <div class="flex items-center space-x-1">
            <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-sm">4.7 (95)</span>
          </div>
        </div>
        <div class="flex gap-3">
          <button class="flex-1 py-3 px-4 rounded-xl bg-gradient-to-r from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 text-white font-semibold shadow-md hover:from-green-500 hover:to-green-700 dark:hover:from-green-700 dark:hover:to-green-900 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
            Add to Cart
          </button>
          <button class="p-3 rounded-xl bg-white/50 dark:bg-gray-700/50 border border-white/50 dark:border-gray-600/50 text-gray-700 dark:text-gray-200 hover:bg-gray-100/50 dark:hover:bg-gray-600/50 shadow-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
          </button>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden bg-white/30 dark:bg-gray-800/30 backdrop-blur-xl border border-white/50 dark:border-gray-700/50 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
        <div class="absolute inset-0 bg-gradient-to-br from-red-200/50 to-orange-200/50 dark:from-red-800/50 dark:to-orange-800/50 opacity-30 blur-2xl -z-10"></div>
        <img src="https://picsum.photos/id/106/400/250" alt="Fresh Berries" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-white/50 dark:border-gray-700/50">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Basket of Mixed Berries</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-4 line-clamp-3">A delightful mix of strawberries, blueberries, and raspberries. Hand-picked for freshness and flavor.</p>
        <div class="flex items-center justify-between text-gray-800 dark:text-gray-200 mb-4">
          <span class="block text-lg font-bold text-green-700 dark:text-green-400">$6.00 / basket</span>
          <div class="flex items-center space-x-1">
            <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-sm">4.9 (150)</span>
          </div>
        </div>
        <div class="flex gap-3">
          <button class="flex-1 py-3 px-4 rounded-xl bg-gradient-to-r from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 text-white font-semibold shadow-md hover:from-green-500 hover:to-green-700 dark:hover:from-green-700 dark:hover:to-green-900 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
            Add to Cart
          </button>
          <button class="p-3 rounded-xl bg-white/50 dark:bg-gray-700/50 border border-white/50 dark:border-gray-600/50 text-gray-700 dark:text-gray-200 hover:bg-gray-100/50 dark:hover:bg-gray-600/50 shadow-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
          </button>
        </div>
      </div>

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