Rechercher des composants

Catégories

Composants Liste de souhaits

Liste de souhaits

Liste des produits enregistrés pour un examen futur

Glassmorphism Wishlist Component - Agriculture/Élevage

Un composant de liste de souhaits réactif avec un style de conception glassmorphism, une palette de couleurs pastel et adapté aux sites Web agricoles. Comprend des éléments translucides givrés ressemblant à du verre avec des effets de flou, du HTML sémantique et une prise en charge complète du mode sombre.

Ouvrir Aperçu

                <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>

Composant de la liste de souhaits Art Déco

Un composant complexe et réactif de la liste de souhaits de style Art Déco inspiré du luxe des années 1920-1930, avec des tons de bijoux adaptés aux interfaces finance/banque. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-emerald-400 to-teal-600 dark:from-gray-900 dark:to-teal-900 p-4 sm:p-6 md:p-8 font-serif text-white">
  <div class="max-w-7xl mx-auto bg-gradient-to-br from-teal-700 to-emerald-800 dark:from-gray-800 dark:to-teal-950 shadow-2xl rounded-xl border border-teal-500 dark:border-teal-700 overflow-hidden relative">
    <!-- Geometric Overlay - Top Left -->
    <div class="absolute top-0 left-0 w-32 h-32 bg-teal-600 opacity-20 dark:bg-teal-900 transform -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-lg"></div>
    <div class="absolute top-2 left-2 w-24 h-24 bg-teal-500 opacity-30 dark:bg-teal-800 transform -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-lg"></div>
    <!-- Geometric Overlay - Bottom Right -->
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-emerald-600 opacity-20 dark:bg-emerald-900 transform translate-x-1/2 translate-y-1/2 rotate-45 rounded-lg"></div>
    <div class="absolute bottom-2 right-2 w-24 h-24 bg-emerald-500 opacity-30 dark:bg-emerald-800 transform translate-x-1/2 translate-y-1/2 rotate-45 rounded-lg"></div>

    <div class="relative z-10 p-4 sm:p-6 md:p-10">
      <header class="flex flex-col sm:flex-row items-center justify-between pb-6 mb-8 border-b border-gold-400 dark:border-gold-700">
        <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-gold-200 dark:text-gold-300 drop-shadow-lg p mb-4 sm:mb-0">
          <span class="block">Imperial &nbsp;Accrual</span>
          <span class="block text-xl sm:text-2xl mt-1">Your Refined Selections</span>
        </h1>
        <div class="flex space-x-4">
          <button class="px-4 py-2 sm:px-6 sm:py-3 bg-gold-500 hover:bg-gold-600 text-teal-900 font-semibold rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300 ease-in-out border-2 border-gold-400 dark:border-gold-700">
            <svg class="inline-block mr-2 w-5 h-5" 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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            Add Item
          </button>
          <button class="px-4 py-2 sm:px-6 sm:py-3 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300 ease-in-out border-2 border-red-500 dark:border-red-800">
            <svg class="inline-block mr-2 w-5 h-5" 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>
            Clear All
          </button>
        </div>
      </header>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <!-- Filter & Sort Panel -->
        <aside class="md:col-span-1 bg-gradient-to-br from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 p-6 rounded-lg shadow-xl border border-teal-600 dark:border-teal-800">
          <h3 class="text-2xl font-semibold mb-4 text-gold-300 dark:text-gold-400 border-b pb-2 border-gold-500 dark:border-gold-700">Refine Prospects</h3>
          <div class="mb-6">
            <label for="category" class="block text-gold-200 text-lg mb-2">Category</label>
            <select id="category" class="w-full p-3 bg-teal-900 border border-teal-500 rounded-md text-white focus:ring-gold-500 focus:border-gold-500 dark:bg-gray-800 dark:border-gray-600">
              <option value="all">All Assets</option>
              <option value="investments">Investments</option>
              <option value="property">Property</option>
              <option value="luxury">Luxury Goods</option>
              <option value="education">Education Funds</option>
            </select>
          </div>
          <div class="mb-6">
            <label for="status" class="block text-gold-200 text-lg mb-2">Status</label>
            <select id="status" class="w-full p-3 bg-teal-900 border border-teal-500 rounded-md text-white focus:ring-gold-500 focus:border-gold-500 dark:bg-gray-800 dark:border-gray-600">
              <option value="all">All Statuses</option>
              <option value="pending">Pending</option>
              <option value="acquired">Acquired</option>
              <option value="rejected">Rejected</option>
            </select>
          </div>
          <div class="mb-6">
            <label for="sort" class="block text-gold-200 text-lg mb-2">Sort By</label>
            <select id="sort" class="w-full p-3 bg-teal-900 border border-teal-500 rounded-md text-white focus:ring-gold-500 focus:border-gold-500 dark:bg-gray-800 dark:border-gray-600">
              <option value="date">Date Added</option>
              <option value="value-asc">Value: Low to High</option>
              <option value="value-desc">Value: High to Low</option>
            </select>
          </div>
          <button class="w-full px-4 py-3 bg-gold-600 hover:bg-gold-700 text-teal-900 font-semibold rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out border-2 border-gold-500 dark:border-gold-800">
            Apply Filters
          </button>
        </aside>

        <!-- Wishlist Items Grid -->
        <section class="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
          <!-- Wishlist Item 1 -->
          <div class="bg-gradient-to-br from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 rounded-xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out border border-teal-600 dark:border-teal-800 relative group">
            <div class="relative h-48 overflow-hidden">
              <img src="https://picsum.photos/id/68/400/250" alt="Luxury Apartment" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
              <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-emerald-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md border border-white dark:border-gray-300">Property</span>
            </div>
            <div class="p-5">
              <h4 class="text-xl font-bold text-gold-200 dark:text-gold-300 mb-2">Metropolis Penthouse A5</h4>
              <p class="text-sm text-gold-100 dark:text-gray-300 mb-3 line-clamp-2">A stunning, high-rise luxury apartment with panoramic city views and bespoke interior design.</p>
              <p class="text-lg font-semibold text-gold-300 dark:text-gold-400 mb-4">Value: $3,500,000</p>
              <div class="flex items-center text-gold-100 dark:text-gold-200 text-sm mb-4">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                Added: <span class="ml-1">2023-10-26</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="px-3 py-1 text-xs font-semibold rounded-full bg-yellow-500 text-yellow-900 border border-yellow-400 dark:bg-yellow-700 dark:text-yellow-100">Pending</span>
                <div class="flex space-x-3">
                  <button class="text-gold-400 hover:text-gold-300 transform hover:scale-110 transition-transform duration-200">
                    <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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                  </button>
                  <button class="text-red-400 hover:text-red-300 transform hover:scale-110 transition-transform duration-200">
                    <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>

          <!-- Wishlist Item 2 -->
          <div class="bg-gradient-to-br from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 rounded-xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out border border-teal-600 dark:border-teal-800 relative group">
            <div class="relative h-48 overflow-hidden">
              <img src="https://picsum.photos/id/1018/400/250" alt="Rare Stock Portfolio" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
              <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md border border-white dark:border-gray-300">Investments</span>
            </div>
            <div class="p-5">
              <h4 class="text-xl font-bold text-gold-200 dark:text-gold-300 mb-2">Regal Tech Portfolio Q4</h4>
              <p class="text-sm text-gold-100 dark:text-gray-300 mb-3 line-clamp-2">A curated portfolio of high-growth technology stocks with promising long-term returns.</p>
              <p class="text-lg font-semibold text-gold-300 dark:text-gold-400 mb-4">Value: $1,200,000</p>
              <div class="flex items-center text-gold-100 dark:text-gold-200 text-sm mb-4">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                Added: <span class="ml-1">2023-09-15</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-500 text-green-900 border border-green-400 dark:bg-green-700 dark:text-green-100">Acquired</span>
                <div class="flex space-x-3">
                  <button class="text-gold-400 hover:text-gold-300 transform hover:scale-110 transition-transform duration-200">
                    <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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                  </button>
                  <button class="text-red-400 hover:text-red-300 transform hover:scale-110 transition-transform duration-200">
                    <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>

          <!-- Wishlist Item 3 -->
          <div class="bg-gradient-to-br from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 rounded-xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out border border-teal-600 dark:border-teal-800 relative group">
            <div class="relative h-48 overflow-hidden">
              <img src="https://picsum.photos/id/194/400/250" alt="Education Fund" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
              <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md border border-white dark:border-gray-300">Education</span>
            </div>
            <div class="p-5">
              <h4 class="text-xl font-bold text-gold-200 dark:text-gold-300 mb-2">Oxford Endowment Plan</h4>
              <p class="text-sm text-gold-100 dark:text-gray-300 mb-3 line-clamp-2">A robust education fund designed for prestigious university tuition and living expenses.</p>
              <p class="text-lg font-semibold text-gold-300 dark:text-gold-400 mb-4">Value: $500,000</p>
              <div class="flex items-center text-gold-100 dark:text-gold-200 text-sm mb-4">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                Added: <span class="ml-1">2023-08-01</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="px-3 py-1 text-xs font-semibold rounded-full bg-yellow-500 text-yellow-900 border border-yellow-400 dark:bg-yellow-700 dark:text-yellow-100">Pending</span>
                <div class="flex space-x-3">
                  <button class="text-gold-400 hover:text-gold-300 transform hover:scale-110 transition-transform duration-200">
                    <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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                  </button>
                  <button class="text-red-400 hover:text-red-300 transform hover:scale-110 transition-transform duration-200">
                    <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>

          <!-- Wishlist Item 4 -->
          <div class="bg-gradient-to-br from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 rounded-xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out border border-teal-600 dark:border-teal-800 relative group">
            <div class="relative h-48 overflow-hidden">
              <img src="https://picsum.photos/id/188/400/250" alt="Vintage Automobile" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
              <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-fuchsia-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md border border-white dark:border-gray-300">Luxury</span>
            </div>
            <div class="p-5">
              <h4 class="text-xl font-bold text-gold-200 dark:text-gold-300 mb-2">1930s Duesenberg J</h4>
              <p class="text-sm text-gold-100 dark:text-gray-300 mb-3 line-clamp-2">A meticulously restored classic automobile, a true symbol of automotive luxury and history.</p>
              <p class="text-lg font-semibold text-gold-300 dark:text-gold-400 mb-4">Value: $2,800,000</p>
              <div class="flex items-center text-gold-100 dark:text-gold-200 text-sm mb-4">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                Added: <span class="ml-1">2023-07-05</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-500 text-green-900 border border-green-400 dark:bg-green-700 dark:text-green-100">Acquired</span>
                <div class="flex space-x-3">
                  <button class="text-gold-400 hover:text-gold-300 transform hover:scale-110 transition-transform duration-200">
                    <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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                  </button>
                  <button class="text-red-400 hover:text-red-300 transform hover:scale-110 transition-transform duration-200">
                    <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>
        </section>
      </div>

      <!-- Summary Section -->
      <section class="bg-gradient-to-tr from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 p-6 rounded-xl shadow-xl mt-8 border border-teal-600 dark:border-teal-800">
        <h3 class="text-2xl font-semibold mb-4 text-gold-300 dark:text-gold-400 border-b pb-2 border-gold-500 dark:border-gold-700">Portfolio Overview</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 text-center">
          <div class="bg-teal-900 dark:bg-gray-800 p-4 rounded-lg shadow border border-teal-700 dark:border-gray-600">
            <p class="text-gold-200 text-sm">Total Items</p>
            <p class="text-3xl font-bold text-gold-400 dark:text-gold-300">4</p>
          </div>
          <div class="bg-teal-900 dark:bg-gray-800 p-4 rounded-lg shadow border border-teal-700 dark:border-gray-600">
            <p class="text-gold-200 text-sm">Total Value</p>
            <p class="text-xl sm:text-2xl font-bold text-gold-400 dark:text-gold-300">$8.0M</p>
          </div>
          <div class="bg-teal-900 dark:bg-gray-800 p-4 rounded-lg shadow border border-teal-700 dark:border-gray-600">
            <p class="text-gold-200 text-sm">Acquired</p>
            <p class="text-3xl font-bold text-gold-400 dark:text-gold-300">2</p>
          </div>
          <div class="bg-teal-900 dark:bg-gray-800 p-4 rounded-lg shadow border border-teal-700 dark:border-gray-600">
            <p class="text-gold-200 text-sm">Pending</p>
            <p class="text-3xl font-bold text-gold-400 dark:text-gold-300">2</p>
          </div>
        </div>
      </section>

      <!-- User Profile/Avatar -->
      <div class="bg-gradient-to-tl from-emerald-800 to-teal-900 dark:from-teal-900 dark:to-gray-800 p-4 rounded-xl shadow-inner mt-8 flex items-center justify-between border border-emerald-600 dark:border-teal-700">
        <div class="flex items-center space-x-4">
          <img class="w-12 h-12 rounded-full border-2 border-gold-400 dark:border-gold-700 shadow-md" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <div>
            <p class="text-lg font-semibold text-gold-300 dark:text-gold-400">Ms. Evelyn Sterling</p>
            <p class="text-sm text-gold-200 dark:text-gray-300">Wealth Manager, Elite Global Bank</p>
          </div>
        </div>
        <button class="text-gold-400 hover:text-gold-300 transform hover:scale-105 transition-transform duration-200">
          <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        </button>
      </div>

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

Glassmorphism_Wishlist_Component

Un composant de liste de souhaits complexe et réactif avec un design Glassmorphism avec des tons océan/bleu, optimisé pour les plateformes de rencontres/sociales. Comprend la prise en charge du mode sombre et des éléments interactifs.

Ouvrir Aperçu

                <div class="min-h-screen p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-blue-100 to-indigo-200 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 flex items-center justify-center font-sans">
  <div class="w-full max-w-6xl rounded-3xl backdrop-blur-xl bg-white/30 dark:bg-gray-800/30 p-6 sm:p-8 lg:p-10 shadow-2xl border border-white/50 dark:border-gray-700/50 overflow-hidden relative">

    <!-- Glassmorphism Overlay Elements -->
    <div class="absolute inset-0 -z-10 overflow-hidden">
      <div class="absolute top-1/4 left-1/3 w-96 h-96 bg-blue-400 opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob"></div>
      <div class="absolute bottom-1/4 right-1/3 w-96 h-96 bg-indigo-400 opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000"></div>
      <div class="absolute top-1/2 left-1/4 w-80 h-80 bg-sky-400 opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000"></div>
    </div>

    <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-400 dark:to-sky-500 drop-shadow-lg">
      Your Wishlist ❤️
    </h1>

    <p class="text-center text-lg sm:text-xl mb-12 text-gray-700 dark:text-gray-300">
      People you've liked who resonated with you. Send a message to connect!
    </p>

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

      <!-- Wishlist Item 1 -->
      <div class="rounded-2xl backdrop-blur-xl bg-white/40 dark:bg-gray-800/40 p-5 border border-white/60 dark:border-gray-700/60 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300/20 to-indigo-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <div class="w-28 h-28 sm:w-32 sm:h-32 rounded-full overflow-hidden border-4 border-blue-400 dark:border-sky-500 shadow-md mb-4 bg-gray-200 dark:bg-gray-700 flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile Picture" class="w-full h-full object-cover">
          </div>
          <h3 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-700 to-indigo-800 dark:from-blue-300 dark:to-sky-400 mb-2 drop-shadow-sm">Eleanor R.</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">28, New York</p>
          <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm mt-2 line-clamp-2">Loves hiking, indie music, and cozy coffee shops.</p>
          <div class="mt-4 flex space-x-3">
            <button class="flex items-center px-4 py-2 rounded-full bg-blue-600 hover:bg-blue-700 dark:bg-sky-600 dark:hover:bg-sky-700 text-white text-sm font-medium transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.516 12.234 2 10.368 2 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm4 0H9v2h2V9zm4 0h-2v2h2V9z" clip-rule="evenodd" />
              </svg>
              Message
            </button>
            <button class="p-2 rounded-full bg-red-500/80 hover:bg-red-600 dark:bg-red-600/80 dark:hover:bg-red-700 text-white transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="rounded-2xl backdrop-blur-xl bg-white/40 dark:bg-gray-800/40 p-5 border border-white/60 dark:border-gray-700/60 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300/20 to-indigo-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <div class="w-28 h-28 sm:w-32 sm:h-32 rounded-full overflow-hidden border-4 border-blue-400 dark:border-sky-500 shadow-md mb-4 bg-gray-200 dark:bg-gray-700 flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture" class="w-full h-full object-cover">
          </div>
          <h3 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-700 to-indigo-800 dark:from-blue-300 dark:to-sky-400 mb-2 drop-shadow-sm">Michael B.</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">30, Los Angeles</p>
          <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm mt-2 line-clamp-2">Software engineer who enjoys surfing and playing guitar.</p>
          <div class="mt-4 flex space-x-3">
            <button class="flex items-center px-4 py-2 rounded-full bg-blue-600 hover:bg-blue-700 dark:bg-sky-600 dark:hover:bg-sky-700 text-white text-sm font-medium transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.516 12.234 2 10.368 2 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm4 0H9v2h2V9zm4 0h-2v2h2V9z" clip-rule="evenodd" />
              </svg>
              Message
            </button>
            <button class="p-2 rounded-full bg-red-500/80 hover:bg-red-600 dark:bg-red-600/80 dark:hover:bg-red-700 text-white transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="rounded-2xl backdrop-blur-xl bg-white/40 dark:bg-gray-800/40 p-5 border border-white/60 dark:border-gray-700/60 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300/20 to-indigo-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <div class="w-28 h-28 sm:w-32 sm:h-32 rounded-full overflow-hidden border-4 border-blue-400 dark:border-sky-500 shadow-md mb-4 bg-gray-200 dark:bg-gray-700 flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile Picture" class="w-full h-full object-cover">
          </div>
          <h3 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-700 to-indigo-800 dark:from-blue-300 dark:to-sky-400 mb-2 drop-shadow-sm">Sophia L.</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">26, Chicago</p>
          <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm mt-2 line-clamp-2">Passionate chef, loves exploring new cuisines and traveling.</p>
          <div class="mt-4 flex space-x-3">
            <button class="flex items-center px-4 py-2 rounded-full bg-blue-600 hover:bg-blue-700 dark:bg-sky-600 dark:hover:bg-sky-700 text-white text-sm font-medium transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.516 12.234 2 10.368 2 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm4 0H9v2h2V9zm4 0h-2v2h2V9z" clip-rule="evenodd" />
              </svg>
              Message
            </button>
            <button class="p-2 rounded-full bg-red-500/80 hover:bg-red-600 dark:bg-red-600/80 dark:hover:bg-red-700 text-white transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- Add more wishlist items as needed -->

    </div>

    <div class="mt-12 text-center">
      <button class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 dark:from-sky-500 dark:to-blue-600 dark:hover:from-sky-600 dark:hover:to-blue-700 text-white text-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-xl">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        Discover More People
      </button>
    </div>

  </div>
</div>

<style>
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }
  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>

Composant de la liste de souhaits

Un composant de liste de souhaits réactif pour les applications de sport/fitness, avec des micro-interactions, une palette de couleurs à contraste élevé et la prise en charge du mode sombre. Les utilisateurs peuvent ajouter/supprimer des éléments et voir un retour visuel.

Ouvrir Aperçu

                <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-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-8 sm:mb-12 text-center">
      Your Fitness Wishlist
    </h2>

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

      <!-- Wishlist Item 1 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=1" alt="Sports Item 1" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Pro Training Shoes</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">High-performance running shoes designed for speed and comfort.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$120.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full animate-bounce-custom" style="animation-iteration-count: infinite;">10% OFF</div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=2" alt="Sports Item 2" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Smart Fitness Tracker</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Monitor your heart rate, steps, and sleep with advanced precision.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$85.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=3" alt="Sports Item 3" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Ergonomic Yoga Mat</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Non-slip surface and extra cushioning for optimal yoga and pilates sessions.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$45.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
        <div class="absolute top-3 left-3 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</div>
      </div>

      <!-- Wishlist Item 4 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=4" alt="Sports Item 4" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Durable Dumbbell Set</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Adjustable weights for versatile strength training workouts at home.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$150.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 5 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=5" alt="Sports Item 5" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Hydration Backpack</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Lightweight and spacious backpack for long runs or hikes.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$60.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 6 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=6" alt="Sports Item 6" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Resistance Band Set</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Versatile bands for strength, flexibility, and rehabilitation exercises.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$30.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
      </div>

    </div>

    <div class="mt-12 text-center">
      <button class="inline-flex items-center px-8 py-4 bg-lime-600 hover:bg-lime-700 dark:bg-lime-500 dark:hover:bg-lime-600 text-white text-lg sm:text-xl font-bold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 group">
        <svg class="w-6 h-6 mr-3 group-hover:rotate-6 transition-transform duration-300" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
        </svg>
        Proceed to Checkout
      </button>
    </div>

  </div>
</div>

<style>
  /* Custom keyframes for bounce-custom animation */
  @keyframes bounce-custom {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  .animate-bounce-custom {
    animation-name: bounce-custom;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
  }
</style>

Composant de la liste de souhaits

Un composant de liste de souhaits complexe et réactif avec un design rétro/vintage, une palette de couleurs de terre et une prise en charge du mode sombre, adapté à un blog ou à un site de contenu.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-stone-100 text-stone-800 dark:bg-stone-900 dark:text-stone-200 transition-colors duration-300 p-4 sm:p-6 md:p-8">
  <div class="max-w-6xl mx-auto bg-amber-50 rounded-lg shadow-xl overflow-hidden dark:bg-stone-800 border border-stone-300 dark:border-stone-700 relative">
    <!-- Retro TV Bezel Effect -->
    <div class="absolute inset-0 border-[1.5rem] border-solid border-stone-400 dark:border-stone-950 rounded-lg pointer-events-none z-10 flex items-center justify-center">
      <div class="absolute inset-0 border-stone-600 dark:border-stone-700 border-[0.5rem] rounded-lg"></div>
      <span class="absolute top-2 left-2 text-sm text-stone-700 dark:text-stone-300 font-mono">VOL</span>
      <span class="absolute top-2 right-2 text-sm text-stone-700 dark:text-stone-300 font-mono">CH</span>
      <div class="absolute bottom-4 right-4 w-6 h-6 bg-stone-600 rounded-full shadow-md dark:bg-stone-700"></div>
      <div class="absolute bottom-4 left-4 w-6 h-6 bg-stone-600 rounded-full shadow-md dark:bg-stone-700"></div>
      <div class="absolute top-6 right-6 w-3 h-3 bg-red-600 rounded-full animate-pulse"></div>
    </div>

    <div class="relative z-20 p-4 sm:p-6 lg:p-8">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-center text-orange-800 dark:text-orange-400 mb-6 font-serif">Your Wishlist</h2>
      <p class="text-center text-sm mb-8 text-stone-700 dark:text-stone-300 font-mono">Saved items for later enjoyment.</p>

      <!-- Sort and Filter Controls -->
      <div class="flex flex-col sm:flex-row justify-between items-center mb-8 bg-stone-200/50 dark:bg-stone-700/50 rounded-md p-3 sm:p-4 border border-stone-300 dark:border-stone-600">
        <div class="w-full sm:w-auto mb-4 sm:mb-0">
          <label for="sort-by" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1"><span class="font-bold">Sort By:</span></label>
          <select id="sort-by" class="mt-1 block w-full rounded-md border-stone-300 dark:border-stone-600 shadow-sm focus:border-orange-500 focus:ring-orange-500 bg-white dark:bg-stone-900 text-stone-800 dark:text-stone-200 py-2 pl-3 pr-10 text-base sm:text-sm">
            <option>Date Added (Newest)</option>
            <option>Date Added (Oldest)</option>
            <option>Price (Low to High)</option>
            <option>Price (High to Low)</option>
            <option>Alphabetical (A-Z)</option>
          </select>
        </div>
        <div class="w-full sm:w-auto">
          <label for="filter-category" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1"><span class="font-bold">Filter By Category:</span></label>
          <select id="filter-category" class="mt-1 block w-full rounded-md border-stone-300 dark:border-stone-600 shadow-sm focus:border-orange-500 focus:ring-orange-500 bg-white dark:bg-stone-900 text-stone-800 dark:text-stone-200 py-2 pl-3 pr-10 text-base sm:text-sm">
            <option>All</option>
            <option>Books</option>
            <option>Gadgets</option>
            <option>Home Decor</option>
            <option>Fashion</option>
          </select>
        </div>
      </div>

      <!-- Wishlist Items Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

        <!-- Wishlist Item 1 -->
        <div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1018/400/300" alt="Old Camera">
          <div class="p-4 flex flex-col flex-grow">
            <h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">Vintage Film Camera</h3>
            <p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">A rare beauty from the 70s, perfect for collectors.</p>
            <div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
              <span class="font-bold text-base mr-2 text-green-700 dark:text-green-400">$299.99</span>
              <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">In Stock</span>
            </div>
            <div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
              <button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                Remove
              </button>
              <button class="px-4 py-2 bg-orange-600 text-white text-sm font-semibold rounded-md shadow-md hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
                Add to Cart
              </button>
            </div>
          </div>
        </div>

        <!-- Wishlist Item 2 -->
        <div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/id/104/400/300" alt="Old Typewriter">
          <div class="p-4 flex flex-col flex-grow">
            <h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">Antique Typewriter</h3>
            <p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">Functional and beautiful, a piece of literary history.</p>
            <div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
              <span class="font-bold text-base mr-2 text-green-700 dark:text-green-400">$189.00</span>
              <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">In Stock</span>
            </div>
            <div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
              <button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                Remove
              </button>
              <button class="px-4 py-2 bg-orange-600 text-white text-sm font-semibold rounded-md shadow-md hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
                Add to Cart
              </button>
            </div>
          </div>
        </div>

        <!-- Wishlist Item 3 (Out of Stock) -->
        <div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col opacity-70">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/id/338/400/300" alt="Record Player">
          <div class="p-4 flex flex-col flex-grow">
            <h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">Classic Vinyl Player</h3>
            <p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">Spin your favorite tunes on this retro-style player.</p>
            <div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
              <span class="font-bold text-base mr-2 text-gray-700 dark:text-gray-400">$120.50</span>
              <span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Out of Stock</span>
            </div>
            <div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
              <button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 cursor-not-allowed">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                Remove
              </button>
              <button disabled class="px-4 py-2 bg-gray-400 text-white text-sm font-semibold rounded-md shadow-md cursor-not-allowed dark:bg-gray-600">
                Out of Stock
              </button>
            </div>
          </div>
        </div>

        <!-- Wishlist Item 4 -->
        <div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/id/37/400/300" alt="Old Book">
          <div class="p-4 flex flex-col flex-grow">
            <h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">First Edition Novel</h3>
            <p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">A must-read classic in pristine condition.</p>
            <div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
              <span class="font-bold text-base mr-2 text-green-700 dark:text-green-400">$45.00</span>
              <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">In Stock</span>
            </div>
            <div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
              <button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                Remove
              </button>
              <button class="px-4 py-2 bg-orange-600 text-white text-sm font-semibold rounded-md shadow-md hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
                Add to Cart
              </button>
            </div>
          </div>
        </div>

      </div>

      <!-- Call to Action / Explore More -->
      <div class="text-center mt-10">
        <p class="text-stone-700 dark:text-stone-300 mb-4 font-mono">Looking for more vintage finds?</p>
        <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Explore Catalog
          <svg class="ml-3 -mr-1 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </button>
      </div>

      <!-- User Profile Thumbnail -->
      <div class="absolute top-6 left-6 flex items-center bg-brown-600 dark:bg-brown-800 text-amber-50 rounded-full px-4 py-2 shadow-lg hidden md:flex font-mono">
        <img class="w-8 h-8 rounded-full mr-2 border-2 border-amber-300 dark:border-amber-600" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
        <span class="text-sm">User's List</span>
      </div>

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

Composant de la liste de souhaits

Composant de liste de souhaits avec conception 3D, schéma de couleurs analogue et complexité simple à des fins de tableau de bord, avec conception réactive et prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="dark:bg-gray-900 bg-gray-100 min-h-screen p-4">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden md:max-w-2xl transform transition-all duration-300 hover:scale-105">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48 transform translate-x-2 translate-y-2 rotate-3 shadow-lg rounded-lg" src="https://picsum.photos/seed/wishlist/400/300" alt="Product image">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-300 font-semibold">Wishlist Item</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Awesome Product Name</a>
        <p class="mt-2 text-gray-500 dark:text-gray-400">A short description of the product, highlighting its key features and benefits.</p>
        <div class="mt-4 flex items-center justify-between">
          <span class="text-xl font-bold text-gray-900 dark:text-white">$29.99</span>
          <button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-all duration-300 hover:scale-110">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Composant de la liste de souhaits

Composant de liste de souhaits rétro / vintage pour le commerce électronique avec schéma de couleurs triadique, complexité simple, conception réactive et prise en charge du thème sombre.

Ouvrir Aperçu

                <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>

Composant de la liste de souhaits

Composant de liste de souhaits de skeuomorphisme complexe avec schéma de couleurs complémentaires, à des fins de médias sociaux. Réactif, avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex flex-col items-center justify-center font-sans">

    <!-- Skeuomorphic Container -->
    <div class="w-full max-w-4xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-3xl 
                shadow-2xl dark:shadow-none 
                border-t-2 border-l-2 border-gray-50 dark:border-gray-600 
                border-r-2 border-b-2 border-gray-400 dark:border-gray-900 
                p-8 space-y-8 
                relative 
                overflow-hidden">

        <!-- Inner Bevel/Emboss Effect -->
        <div class="absolute inset-4 rounded-2xl 
                    bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-700 
                    shadow-inner-xl dark:shadow-inner-dark 
                    opacity-75">
        </div>

        <div class="relative z-10">
            <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center 
                        drop-shadow-lg dark:drop-shadow-none 
                        [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)] dark:[text-shadow:_0_2px_0_rgb(0_0_0_/_60%)]">
                My Wishlist
            </h1>

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

                <!-- Wishlist Item 1 -->
                <div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800 
                            rounded-2xl p-6 
                            shadow-lg dark:shadow-xl 
                            border-t border-l border-slate-50 dark:border-slate-600 
                            border-r border-b border-slate-300 dark:border-slate-900 
                            flex flex-col items-center space-y-4 
                            transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
                    <img src="https://picsum.photos/seed/item1/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Retro Gaming Console</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center text-sm">A classic console for nostalgic gaming sessions.</p>
                    <div class="flex items-center space-x-2">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
                        <span class="text-sm text-gray-700 dark:text-gray-200">@john_doe</span>
                    </div>
                    <button class="w-full py-3 rounded-xl 
                                bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700 
                                text-white font-bold 
                                shadow-md dark:shadow-lg 
                                border-t border-l border-indigo-400 dark:border-indigo-500 
                                border-r border-b border-blue-700 dark:border-blue-800 
                                active:shadow-inner active:from-blue-600 active:to-indigo-500 
                                transform transition duration-200 
                                focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
                        <i class="fas fa-heart mr-2"></i> Add to Cart
                    </button>
                </div>

                <!-- Wishlist Item 2 -->
                <div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800 
                            rounded-2xl p-6 
                            shadow-lg dark:shadow-xl 
                            border-t border-l border-slate-50 dark:border-slate-600 
                            border-r border-b border-slate-300 dark:border-slate-900 
                            flex flex-col items-center space-y-4 
                            transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
                    <img src="https://picsum.photos/seed/item2/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Vintage Camera</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center text-sm">Capture moments with a classic aesthetic.</p>
                    <div class="flex items-center space-x-2">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
                        <span class="text-sm text-gray-700 dark:text-gray-200">@jane_smith</span>
                    </div>
                    <button class="w-full py-3 rounded-xl 
                                bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700 
                                text-white font-bold 
                                shadow-md dark:shadow-lg 
                                border-t border-l border-indigo-400 dark:border-indigo-500 
                                border-r border-b border-blue-700 dark:border-blue-800 
                                active:shadow-inner active:from-blue-600 active:to-indigo-500 
                                transform transition duration-200 
                                focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
                        <i class="fas fa-heart mr-2"></i> Add to Cart
                    </button>
                </div>

                <!-- Wishlist Item 3 -->
                <div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800 
                            rounded-2xl p-6 
                            shadow-lg dark:shadow-xl 
                            border-t border-l border-slate-50 dark:border-slate-600 
                            border-r border-b border-slate-300 dark:border-slate-900 
                            flex flex-col items-center space-y-4 
                            transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
                    <img src="https://picsum.photos/seed/item3/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Mechanical Keyboard</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center text-sm">Satisfying clicks for your typing pleasure.</p>
                    <div class="flex items-center space-x-2">
                        <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
                        <span class="text-sm text-gray-700 dark:text-gray-200">@mike_wong</span>
                    </div>
                    <button class="w-full py-3 rounded-xl 
                                bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700 
                                text-white font-bold 
                                shadow-md dark:shadow-lg 
                                border-t border-l border-indigo-400 dark:border-indigo-500 
                                border-r border-b border-blue-700 dark:border-blue-800 
                                active:shadow-inner active:from-blue-600 active:to-indigo-500 
                                transform transition duration-200 
                                focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
                        <i class="fas fa-heart mr-2"></i> Add to Cart
                    </button>
                </div>

            </div>

            <!-- Call to Action / Share Wishlist Button -->
            <div class="mt-10 text-center">
                <button class="py-4 px-8 rounded-full 
                            bg-gradient-to-br from-green-400 to-emerald-500 dark:from-green-600 dark:to-emerald-700 
                            text-white font-extrabold text-lg 
                            shadow-xl dark:shadow-none 
                            border-t border-l border-green-200 dark:border-green-500 
                            border-r border-b border-emerald-600 dark:border-emerald-800 
                            active:shadow-inner active:from-emerald-500 active:to-green-400 
                            transform transition duration-200 
                            focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-opacity-75">
                    <i class="fas fa-share-alt mr-3"></i> Share My Wishlist
                </button>
            </div>

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

<!-- FontAwesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<!-- Custom Tailwind CSS (for inner shadow) -->
<style>
    .shadow-inner-xl {
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
    }

    .dark .shadow-inner-dark {
        box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.05), inset 0 0 30px rgba(255, 255, 255, 0.02);
    }
</style>

Composant de la liste de souhaits

Un composant de liste de souhaits réactif avec des éléments 3D et des couleurs pastel, prenant en charge le thème sombre. Il comprend de multiples éléments interactifs adaptés au commerce électronique. Pas de JavaScript, seulement du HTML et du CSS Tailwind.

Ouvrir Aperçu

                <div class="p-8 font-sans bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 min-h-screen">
  <h1 class="text-4xl font-extrabold mb-8 text-center text-gray-800 dark:text-white relative">
    <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400 dark:from-purple-300 dark:to-pink-300">My Wishlist</span>
    <div class="absolute inset-0 flex items-center justify-center transform -rotate-3 scale-105 z-[-1] opacity-20">
      <img src="https://picsum.photos/seed/wishlist/800/400" alt="3D background element" class="rounded-3xl shadow-2xl">
    </div>
  </h1>

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

    <!-- Wishlist Item 1 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 p-6 border-b-4 border-l-2 border-r-4 border-t-2 border-purple-200 dark:border-purple-600">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-800 dark:to-gray-600 opacity-30 rounded-3xl z-0"></div>
      <div class="relative z-10 flex flex-col items-center">
        <img src="https://picsum.photos/seed/product1/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-purple-100 dark:border-purple-500 transform hover:scale-105 transition-transform">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Pastel Dream Headphones</h2>
        <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Experience serene sound with these beautifully designed pastel headphones. Perfect for relaxation.</p>
        <div class="flex items-center justify-between w-full mb-4">
          <span class="text-2xl font-extrabold text-purple-600 dark:text-purple-300">$129.99</span>
          <div class="relative inline-block w-10 h-10 rounded-full overflow-hidden shadow-lg border-2 border-pink-300 dark:border-pink-500 transform rotate-6">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-pink-100 dark:bg-pink-700 opacity-20"></div>
          </div>
        </div>
        <button class="bg-gradient-to-r from-purple-400 to-pink-400 text-white font-semibold py-3 px-6 rounded-full shadow-lg hover:from-purple-500 hover:to-pink-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 w-full">
          Add to Cart
        </button>
      </div>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 p-6 border-b-4 border-l-2 border-r-4 border-t-2 border-blue-200 dark:border-blue-600">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-green-50 dark:from-gray-800 dark:to-gray-600 opacity-30 rounded-3xl z-0"></div>
      <div class="relative z-10 flex flex-col items-center">
        <img src="https://picsum.photos/seed/product2/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-blue-100 dark:border-blue-500 transform hover:scale-105 transition-transform">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Cloud-Nine Comfort Slippers</h2>
        <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Walk on air with these incredibly soft and stylish pastel slippers.</p>
        <div class="flex items-center justify-between w-full mb-4">
          <span class="text-2xl font-extrabold text-blue-600 dark:text-blue-300">$49.99</span>
          <div class="relative inline-block w-10 h-10 rounded-full overflow-hidden shadow-lg border-2 border-green-300 dark:border-green-500 transform -rotate-6">
            <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-green-100 dark:bg-green-700 opacity-20"></div>
          </div>
        </div>
        <button class="bg-gradient-to-r from-blue-400 to-green-400 text-white font-semibold py-3 px-6 rounded-full shadow-lg hover:from-blue-500 hover:to-green-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700 w-full">
          Add to Cart
        </button>
      </div>
    </div>

    <!-- Wishlist Item 3 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 p-6 border-b-4 border-l-2 border-r-4 border-t-2 border-pink-200 dark:border-pink-600">
      <div class="absolute inset-0 bg-gradient-to-br from-pink-50 to-purple-50 dark:from-gray-800 dark:to-gray-600 opacity-30 rounded-3xl z-0"></div>
      <div class="relative z-10 flex flex-col items-center">
        <img src="https://picsum.photos/seed/product3/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-pink-100 dark:border-pink-500 transform hover:scale-105 transition-transform">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Sunset Hues Scarf</h2>
        <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Wrap yourself in the warm, gentle colors of a sunset with this exquisite scarf.</p>
        <div class="flex items-center justify-between w-full mb-4">
          <span class="text-2xl font-extrabold text-pink-600 dark:text-pink-300">$79.99</span>
          <div class="relative inline-block w-10 h-10 rounded-full overflow-hidden shadow-lg border-2 border-purple-300 dark:border-purple-500 transform rotate-3">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-purple-100 dark:bg-purple-700 opacity-20"></div>
          </div>
        </div>
        <button class="bg-gradient-to-r from-pink-400 to-purple-400 text-white font-semibold py-3 px-6 rounded-full shadow-lg hover:from-pink-500 hover:to-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 w-full">
          Add to Cart
        </button>
      </div>
    </div>

  </div>

</div>

Composant de la liste de souhaits

Un composant de liste de souhaits de style Neumorphisme pour les médias sociaux, avec une palette de couleurs complémentaire. Il comprend un design réactif utilisant Tailwind CSS avec prise en charge du mode sombre. Seules les classes HTML et Tailwind sont utilisées, sans JavaScript. Les images proviennent de picsum.photos et les avatars de randomuser.me.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-200 dark:bg-gray-900 p-8 flex flex-col items-center justify-center">

  <!-- Wishlist Container -->
  <div class="w-full max-w-4xl bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-8 md:p-12 transition-all duration-300">

    <h1 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-8 text-center">My Social Wishlist</h1>

    <!-- Wishlist Item 1 -->
    <div class="flex flex-col md:flex-row items-center bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-6 mb-6 transition-all duration-300">
      <img src="https://picsum.photos/seed/wish1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover shadow-neumorphic-light dark:shadow-neumorphic-dark flex-shrink-0 mb-4 md:mb-0 md:mr-6">
      <div class="flex-grow text-center md:text-left">
        <h2 class="text-xl md:text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Wireless Noise-Cancelling Headphones</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-3 text-sm md:text-base">Experience immersive audio with these premium headphones, perfect for travel and focus.</p>
        <div class="flex items-center justify-center md:justify-start space-x-2">
          <span class="text-lg font-bold text-indigo-600 dark:text-teal-400">$299.99</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$349.99</span>
        </div>
        <div class="flex flex-wrap justify-center md:justify-start gap-2 mt-4">
          <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Add to Cart
          </button>
          <button class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-100 font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Share
          </button>
          <button class="bg-red-500 hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Remove
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="flex flex-col md:flex-row items-center bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-6 mb-6 transition-all duration-300">
      <img src="https://picsum.photos/seed/wish2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover shadow-neumorphic-light dark:shadow-neumorphic-dark flex-shrink-0 mb-4 md:mb-0 md:mr-6">
      <div class="flex-grow text-center md:text-left">
        <h2 class="text-xl md:text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Smartwatch with Health Monitoring</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-3 text-sm md:text-base">Track your fitness, monitor health metrics, and stay connected on the go.</p>
        <div class="flex items-center justify-center md:justify-start space-x-2">
          <span class="text-lg font-bold text-indigo-600 dark:text-teal-400">$199.00</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$229.00</span>
        </div>
        <div class="flex flex-wrap justify-center md:justify-start gap-2 mt-4">
          <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Add to Cart
          </button>
          <button class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-100 font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Share
          </button>
          <button class="bg-red-500 hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Remove
          </button>
        </div>
      </div>
    </div>

    <!-- Social Sharing Section -->
    <div class="mt-8 pt-8 border-t border-gray-300 dark:border-gray-700 text-center">
      <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Share Your Wishlist</h3>
      <div class="flex justify-center flex-wrap gap-4">
        <button class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-semibold py-3 px-6 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-lg">
          <i class="fab fa-facebook-f mr-2"></i> Facebook
        </button>
        <button class="bg-blue-400 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-lg">
          <i class="fab fa-twitter mr-2"></i> Twitter
        </button>
        <button class="bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold py-3 px-6 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-lg">
          <i class="fab fa-instagram mr-2"></i> Instagram
        </button>
      </div>
    </div>

  </div>

  <!-- You might also like section (Example of complex elements) -->
  <div class="w-full max-w-4xl mt-12 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-8 md:p-12 transition-all duration-300">
    <h3 class="text-2xl md:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center">You Might Also Like</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Recommended Item 1 -->
      <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-4 text-center transition-all duration-300">
        <img src="https://picsum.photos/seed/rec1/120/120" alt="Recommended Product" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1">Ergonomic Office Chair</h4>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">$450.00</p>
        <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark text-sm transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark">
          View Item
        </button>
      </div>

      <!-- Recommended Item 2 -->
      <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-4 text-center transition-all duration-300">
        <img src="https://picsum.photos/seed/rec2/120/120" alt="Recommended Product" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1">Premium Coffee Machine</h4>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">$150.00</p>
        <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark text-sm transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark">
          View Item
        </button>
      </div>

      <!-- Recommended Item 3 -->
      <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-4 text-center transition-all duration-300">
        <img src="https://picsum.photos/seed/rec3/120/120" alt="Recommended Product" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1">Smart Home Hub</h4>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">$120.00</p>
        <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark text-sm transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark">
          View Item
        </button>
      </div>

    </div>
  </div>

  <!-- Friends