Search Components

Wishlist

List of products saved for future consideration

Wishlist Component

A complex, responsive wishlist component for SaaS applications with neon/glow effects and an analogous color scheme, supporting dark mode.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-400 dark:to-pink-400 drop-shadow-lg leading-tight">
      Your Lumina Wishlist
    </h1>

    <div class="flex flex-col lg:flex-row gap-6 mb-8">
      <!-- Filter/Sort Sidebar -->
      <div class="lg:w-1/4 p-6 rounded-2xl bg-white dark:bg-gray-800 shadow-xl
                  border border-purple-300 dark:border-purple-700
                  shadow-purple-200/50 dark:shadow-purple-900/50
                  relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 opacity-10 blur-xl dark:opacity-5"></div>
        <div class="relative z-10">
          <h3 class="text-2xl font-bold mb-6 text-purple-600 dark:text-purple-400">Filters & Sort</h3>

          <div class="mb-6">
            <label for="category" class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Category</label>
            <select id="category" class="w-full p-3 rounded-lg border-2 border-purple-300 dark:border-purple-700
                                         bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200
                                         focus:ring-2 focus:ring-pink-500 focus:outline-none transition-all duration-300 ease-in-out
                                         shadow-md dark:shadow-lg">
              <option>All Items</option>
              <option>Software</option>
              <option>Hardware</option>
              <option>Accessories</option>
              <option>Services</option>
            </select>
          </div>

          <div class="mb-6">
            <label for="status" class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Status</label>
            <select id="status" class="w-full p-3 rounded-lg border-2 border-purple-300 dark:border-purple-700
                                        bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200
                                        focus:ring-2 focus:ring-pink-500 focus:outline-none transition-all duration-300 ease-in-out
                                        shadow-md dark:shadow-lg">
              <option>All</option>
              <option>Available</option>
              <option>Out of Stock</option>
              <option>Coming Soon</option>
            </select>
          </div>

          <div class="mb-6">
            <label for="sort" class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Sort By</label>
            <select id="sort" class="w-full p-3 rounded-lg border-2 border-purple-300 dark:border-purple-700
                                      bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200
                                      focus:ring-2 focus:ring-pink-500 focus:outline-none transition-all duration-300 ease-in-out
                                      shadow-md dark:shadow-lg">
              <option>Recently Added</option>
              <option>Price: Low to High</option>
              <option>Price: High to Low</option>
              <option>Alphabetical</option>
            </select>
          </div>

          <button class="w-full py-3 px-6 rounded-lg text-white font-semibold text-lg
                         bg-gradient-to-r from-pink-500 to-red-500
                         hover:from-pink-600 hover:to-red-600
                         focus:outline-none focus:ring-4 focus:ring-pink-500/50 dark:focus:ring-pink-400/50
                         transition-all duration-300 ease-in-out transform hover:scale-105
                         shadow-lg shadow-pink-500/30 dark:shadow-pink-700/50 neon-glow-button">
            Apply Filters
          </button>
        </div>
      </div>

      <!-- Wishlist Items Grid -->
      <div class="lg:w-3/4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6 auto-rows-min">

        <!-- Wishlist Item 1 -->
        <div class="relative flex flex-col p-6 rounded-2xl bg-white dark:bg-gray-800 shadow-xl
                    border border-pink-300 dark:border-pink-700
                    shadow-pink-200/50 dark:shadow-pink-900/50
                    hover:border-2 hover:border-pink-500 transition-all duration-300 ease-in-out
                    group overflow-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-pink-500 via-purple-500 to-blue-500 opacity-10 blur-xl dark:opacity-5"></div>
          <div class="relative z-10 flex flex-col h-full">
            <img src="https://picsum.photos/seed/wishlist1/400/250" alt="Product Image" class="w-full h-40 object-cover rounded-xl mb-4 shadow-md group-hover:scale-105 transition-transform duration-300 ease-in-out">
            <h3 class="text-xl font-bold mb-2 text-pink-600 dark:text-pink-400">Quantum AI Assistant Pro</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3 flex-grow">Revolutionary AI for code generation and analysis, boosting productivity significantly.</p>
            <div class="flex items-center justify-between mb-4 mt-auto">
              <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-400 dark:to-pink-400 drop-shadow">
                $299.99
              </span>
              <span class="text-sm font-semibold text-green-500 dark:text-green-400 py-1 px-3 rounded-full bg-green-100 dark:bg-green-800">In Stock</span>
            </div>
            <div class="flex space-x-2">
              <button class="flex-1 py-3 rounded-lg text-white font-semibold
                             bg-gradient-to-r from-blue-500 to-purple-500
                             hover:from-blue-600 hover:to-purple-600
                             focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50
                             transition-all duration-300 ease-in-out transform hover:scale-105
                             shadow-lg shadow-blue-500/30 dark:shadow-blue-700/50 neon-glow-button">
                Add to Cart
              </button>
              <button class="p-3 rounded-lg bg-gray-200 dark:bg-gray-700
                             text-gray-600 dark:text-gray-300
                             hover:bg-red-500 hover:text-white
                             focus:outline-none focus:ring-4 focus:ring-red-500/50 dark:focus:ring-red-400/50
                             transition-all duration-300 ease-in-out transform hover:scale-105
                             shadow-lg shadow-gray-300/30 dark:shadow-gray-700/50">
                <svg class="w-5 h-5" 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>
              </button>
            </div>
          </div>
        </div>

        <!-- Wishlist Item 2 -->
        <div class="relative flex flex-col p-6 rounded-2xl bg-white dark:bg-gray-800 shadow-xl
                    border border-pink-300 dark:border-pink-700
                    shadow-pink-200/50 dark:shadow-pink-900/50
                    hover:border-2 hover:border-pink-500 transition-all duration-300 ease-in-out
                    group overflow-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-red-500 via-orange-500 to-yellow-500 opacity-10 blur-xl dark:opacity-5"></div>
          <div class="relative z-10 flex flex-col h-full">
            <img src="https://picsum.photos/seed/wishlist2/400/250" alt="Product Image" class="w-full h-40 object-cover rounded-xl mb-4 shadow-md group-hover:scale-105 transition-transform duration-300 ease-in-out">
            <h3 class="text-xl font-bold mb-2 text-pink-600 dark:text-pink-400">Nebula Cloud Storage Pro</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3 flex-grow">Unlimited secure cloud storage with blazing-fast sync and advanced encryption.</p>
            <div class="flex items-center justify-between mb-4 mt-auto">
              <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-400 dark:to-pink-400 drop-shadow">
                $49.99/mo
              </span>
              <span class="text-sm font-semibold text-green-500 dark:text-green-400 py-1 px-3 rounded-full bg-green-100 dark:bg-green-800">In Stock</span>
            </div>
            <div class="flex space-x-2">
              <button class="flex-1 py-3 rounded-lg text-white font-semibold
                             bg-gradient-to-r from-blue-500 to-purple-500
                             hover:from-blue-600 hover:to-purple-600
                             focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50
                             transition-all duration-300 ease-in-out transform hover:scale-105
                             shadow-lg shadow-blue-500/30 dark:shadow-blue-700/50 neon-glow-button">
                Add to Cart
              </button>
              <button class="p-3 rounded-lg bg-gray-200 dark:bg-gray-700
                             text-gray-600 dark:text-gray-300
                             hover:bg-red-500 hover:text-white
                             focus:outline-none focus:ring-4 focus:ring-red-500/50 dark:focus:ring-red-400/50
                             transition-all duration-300 ease-in-out transform hover:scale-105
                             shadow-lg shadow-gray-300/30 dark:shadow-gray-700/50">
                <svg class="w-5 h-5" 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>
              </button>
            </div>
          </div>
        </div>

        <!-- Wishlist Item 3 -->
        <div class="relative flex flex-col p-6 rounded-2xl bg-white dark:bg-gray-800 shadow-xl
                    border border-pink-300 dark:border-pink-700
                    shadow-pink-200/50 dark:shadow-pink-900/50
                    hover:border-2 hover:border-pink-500 transition-all duration-300 ease-in-out
                    group overflow-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-yellow-500 via-orange-500 to-red-500 opacity-10 blur-xl dark:opacity-5"></div>
          <div class="relative z-10 flex flex-col h-full">
            <img src="https://picsum.photos/seed/wishlist3/400/250" alt="Product Image" class="w-full h-40 object-cover rounded-xl mb-4 shadow-md group-hover:scale-105 transition-transform duration-300 ease-in-out">
            <h3 class="text-xl font-bold mb-2 text-pink-600 dark:text-pink-400">Spectra UI Kit v3.0</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3 flex-grow">Figma and Sketch files for a futuristic UI design kit with glowing elements.</p>
            <div class="flex items-center justify-between mb-4 mt-auto">
              <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-400 dark:to-pink-400 drop-shadow">
                $149.00
              </span>
              <span class="text-sm font-semibold text-yellow-500 dark:text-yellow-400 py-1 px-3 rounded-full bg-yellow-100 dark:bg-yellow-800">Coming Soon</span>
            </div>
            <div class="flex space-x-2">
              <button class="flex-1 py-3 rounded-lg text-white font-semibold opacity-60 cursor-not-allowed
                             bg-gradient-to-r from-blue-500 to-purple-500
                             shadow-lg shadow-blue-500/30 dark:shadow-blue-700/50">
                Notify Me
              </button>
              <button class="p-3 rounded-lg bg-gray-200 dark:bg-gray-700
                             text-gray-600 dark:text-gray-300
                             hover:bg-red-500 hover:text-white
                             focus:outline-none focus:ring-4 focus:ring-red-500/50 dark:focus:ring-red-400/50
                             transition-all duration-300 ease-in-out transform hover:scale-105
                             shadow-lg shadow-gray-300/30 dark:shadow-gray-700/50">
                <svg class="w-5 h-5" 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>
              </button>
            </div>
          </div>
        </div>

        <!-- Wishlist Item 4 -->
        <div class="relative flex flex-col p-6 rounded-2xl bg-white dark:bg-gray-800 shadow-xl
                    border border-pink-300 dark:border-pink-700
                    shadow-pink-200/50 dark:shadow-pink-900/50
                    hover:border-2 hover:border-pink-500 transition-all duration-300 ease-in-out
                    group overflow-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-green-500 via-blue-500 to-purple-500 opacity-10 blur-xl dark:opacity-5"></div>
          <div class="relative z-10 flex flex-col h-full">
            <img src="https://picsum.photos/seed/wishlist4/400/250" alt="Product Image" class="w-full h-40 object-cover rounded-xl mb-4 shadow-md group-hover:scale-105 transition-transform duration-300 ease-in-out">
            <h3 class="text-xl font-bold mb-2 text-pink-600 dark:text-pink-400">DynaFlow CRM Integration</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3 flex-grow">Seamless integration for your existing CRM with advanced data analytics.</p>
            <div class="flex items-center justify-between mb-4 mt-auto">
              <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-400 dark:to-pink-400 drop-shadow">
                $79.00/mo
              </span>
              <span class="text-sm font-semibold text-green-500 dark:text-green-400 py-1 px-3 rounded-full bg-green-100 dark:bg-green-800">In Stock</span>
            </div>
            <div class="flex space-x-2">
              <button class="flex-1 py-3 rounded-lg text-white font-semibold
                             bg-gradient-to-r from-blue-500 to-purple-500
                             hover:from-blue-600 hover:to-purple-600
                             focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50
                             transition-all duration-300 ease-in-out transform hover:scale-105
                             shadow-lg shadow-blue-500/30 dark:shadow-blue-700/50 neon-glow-button">
                Add to Cart
              </button>
              <button class="p-3 rounded-lg bg-gray-200 dark:bg-gray-700
                             text-gray-600 dark:text-gray-300
                             hover:bg-red-500 hover:text-white
                             focus:outline-none focus:ring-4 focus:ring-red-500/50 dark:focus:ring-red-400/50
                             transition-all duration-300 ease-in-out transform hover:scale-105
                             shadow-lg shadow-gray-300/30 dark:shadow-gray-700/50">
                <svg class="w-5 h-5" 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>
              </button>
            </div>
          </div>
        </div>

        <!-- Wishlist Item 5 -->
        <div class="relative flex flex-col p-6 rounded-2xl bg-white dark:bg-gray-800 shadow-xl
                    border border-pink-300 dark:border-pink-700
                    shadow-pink-200/50 dark:shadow-pink-900/50
                    hover:border-2 hover:border-pink-500 transition-all duration-300 ease-in-out
                    group overflow-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 opacity-10 blur-xl dark:opacity-5"></div>
          <div class="relative z-10 flex flex-col h-full">
            <img src="https://picsum.photos/seed/wishlist5/400/250" alt="Product Image" class="w-full h-40 object-cover rounded-xl mb-4 shadow-md group-hover:scale-105 transition-transform duration-300 ease-in-out">
            <h3 class="text-xl font-bold mb-2 text-pink-600 dark:text-pink-400">Aura Security Suite</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3 flex-grow">Next-gen cybersecurity with threat detection and real-time protection.</p>
            <div class="flex items-center justify-between mb-4 mt-auto">
              <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-400 dark:to-pink-400 drop-shadow">
                $199.00
              </span>
              <span class="text-sm font-semibold text-green-500 dark:text-green-400 py-1 px-3 rounded-full bg-green-100 dark:bg-green-800">In Stock</span>
            </div>
            <div class="flex space-x-2">
              <button class="flex-1 py-3 rounded-lg text-white font-semibold
                             bg-gradient-to-r from-blue-500 to-purple-500
                             hover:from-blue-600 hover:to-purple-600
                             focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50
                             transition-all duration-300 ease-in-out transform hover:scale-105
                             shadow-lg shadow-blue-500/30 dark:shadow-blue-700/50 neon-glow-button">
                Add to Cart
              </button>
              <button class="p-3 rounded-lg bg-gray-200 dark:bg-gray-700
                             text-gray-600 dark:text-gray-300
                             hover:bg-red-500 hover:text-white
                             focus:outline-none focus:ring-4 focus:ring-red-500/50 dark:focus:ring-red-400/50
                             transition-all duration-300 ease-in-out transform hover:scale-105
                             shadow-lg shadow-gray-300/30 dark:shadow-gray-700/50">
                <svg class="w-5 h-5" 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>
              </button>
            </div>
          </div>
        </div>

        <!-- Wishlist Item 6 -->
        <div class="relative flex flex-col p-6 rounded-2xl bg-white dark:bg-gray-800 shadow-xl
                    border border-pink-300 dark:border-pink-700
                    shadow-pink-200/50 dark:shadow-pink-900/50
                    hover:border-2 hover:border-pink-500 transition-all duration-300 ease-in-out
                    group overflow-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-green-500 via-blue-500 to-purple-500 opacity-10 blur-xl dark:opacity-5"></div>
          <div class="relative z-10 flex flex-col h-full">
            <img src="https://picsum.photos/seed/wishlist6/400/250" alt="Product Image" class="w-full h-40 object-cover rounded-xl mb-4 shadow-md group-hover:scale-105 transition-transform duration-300 ease-in-out">
            <h3 class="text-xl font-bold mb-2 text-pink-600 dark:text-pink-400">ConnectFlow API</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3 flex-grow">Robust API for seamless integration with third-party web services.</p>
            <div class="flex items-center justify-between mb-4 mt-auto">
              <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-400 dark:to-pink-400 drop-shadow">
                $99.00
              </span>
              <span class="text-sm font-semibold text-red-500 dark:text-red-400 py-1 px-3 rounded-full bg-red-100 dark:bg-red-800">Out of Stock</span>
            </div>
            <div class="flex space-x-2">
              <button class="flex-1 py-3 rounded-lg text-white font-semibold opacity-60 cursor-not-allowed
                             bg-gradient-to-r from-blue-500 to-purple-500
                             shadow-lg shadow-blue-500/30 dark:shadow-blue-700/50">
                Not Available
              </button>
              <button class="p-3 rounded-lg bg-gray-200 dark:bg-gray-700
                             text-gray-600 dark:text-gray-300
                             hover:bg-red-500 hover:text-white
                             focus:outline-none focus:ring-4 focus:ring-red-500/50 dark:focus:ring-red-400/50
                             transition-all duration-300 ease-in-out transform hover:scale-105
                             shadow-lg shadow-gray-300/30 dark:shadow-gray-700/50">
                <svg class="w-5 h-5" 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>
              </button>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- Pagination Section -->
    <div class="mt-12 flex justify-center">
      <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <a href="#" class="relative inline-flex items-center px-4 py-2 rounded-l-md border border-purple-300 dark:border-purple-700
                          bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300
                          hover:bg-purple-100 dark:hover:bg-purple-900
                          focus:z-10 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-colors duration-200">
          <span class="sr-only">Previous</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-purple-300 dark:border-purple-700
                                      bg-purple-500 text-white text-sm font-medium
                                      focus:z-10 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-colors duration-200
                                      hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-800 shadow-md shadow-pink-500/30">
          1
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-purple-300 dark:border-purple-700
                          bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300
                          hover:bg-purple-100 dark:hover:bg-purple-900
                          focus:z-10 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-colors duration-200">
          2
        </a>
        <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-purple-300 dark:border-purple-700
                          bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300
                          hover:bg-purple-100 dark:hover:bg-purple-900
                          focus:z-10 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-colors duration-200">
          3
        </a>
        <span class="relative inline-flex items-center px-4 py-2 border border-purple-300 dark:border-purple-700
                       bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300">
          ...
        </span>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-purple-300 dark:border-purple-700
                          bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300
                          hover:bg-purple-100 dark:hover:bg-purple-900
                          focus:z-10 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-colors duration-200">
          10
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 rounded-r-md border border-purple-300 dark:border-purple-700
                          bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300
                          hover:bg-purple-100 dark:hover:bg-purple-900
                          focus:z-10 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-colors duration-200">
          <span class="sr-only">Next</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
      </nav>
    </div>

  </div>
</div>

<style>
  /* Adding a subtle glow effect with a custom utility class */
  .neon-glow-button {
    box-shadow: 0 0 5px rgba(236, 72, 153, 0.7), 0 0 10px rgba(236, 72, 153, 0.5), 0 0 15px rgba(236, 72, 153, 0.3);
  }
  .dark .neon-glow-button {
    box-shadow: 0 0 5px rgba(236, 72, 153, 0.5), 0 0 10px rgba(236, 72, 153, 0.3), 0 0 15px rgba(236, 72, 153, 0.2);
  }

  /* Custom drop-shadow for text to enhance glow effect within a gradient */
  .drop-shadow-lg {
    filter: drop-shadow(0 4px 3px rgba(168, 85, 247, 0.3)) drop-shadow(0 2px 2px rgba(236, 72, 153, 0.2));
  }
  .dark .drop-shadow-lg {
    filter: drop-shadow(0 4px 3px rgba(168, 85, 247, 0.5)) drop-shadow(0 2px 2px rgba(236, 72, 153, 0.4));
  }

  /* Ensure images have smooth transitions too */
  img {
    transition: transform 0.3s ease-in-out;
  }
</style>

Wishlist Component

A simple and responsive wishlist component suitable for dating or social connection platforms, featuring a 3D design aesthetic with corporate blue tones and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-blue-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform perspective-1000 rotateY-3 transition-transform duration-500 ease-in-out hover:rotateY-0 group">
    <!-- Front face with shadow for 3D effect -->
    <div class="absolute inset-0 bg-gradient-to-br from-blue-300 via-blue-500 to-blue-700 dark:from-blue-700 dark:via-blue-900 dark:to-blue-950 opacity-10 group-hover:opacity-0 transition-opacity duration-300 ease-in-out rounded-xl origin-bottom-right rotate-3 transform translateZ-neg10 rotate-y-3">
    </div>
    <div class="relative z-10 p-6 sm:p-8 rounded-xl">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-blue-800 dark:text-blue-200">Your Wishlist</h3>
        <button class="p-2 rounded-full bg-blue-100 hover:bg-blue-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-blue-600 dark:text-gray-300 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
        </button>
      </div>

      <ul class="space-y-4">
        <!-- Wishlist Item 1 -->
        <li class="flex items-center space-x-4 p-3 bg-blue-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transform hover:scale-105 transition duration-300 ease-in-out border border-blue-200 dark:border-gray-600 group">
          <div class="relative w-16 h-16 rounded-full overflow-hidden flex-shrink-0 border-2 border-blue-400 dark:border-blue-500">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-full h-full object-cover transform scale-105 group-hover:scale-110 transition duration-300 ease-in-out">
            <div class="absolute inset-0 bg-gradient-to-br from-blue-300 via-transparent to-transparent opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
          </div>
          <div class="flex-1">
            <h4 class="text-lg font-semibold text-blue-700 dark:text-blue-300">Jane Doe</h4>
            <p class="text-sm text-gray-500 dark:text-gray-400">Loves hiking & coffee</p>
          </div>
          <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 transition duration-300 ease-in-out p-1 rounded-full hover:bg-red-100 dark:hover:bg-gray-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </li>

        <!-- Wishlist Item 2 -->
        <li class="flex items-center space-x-4 p-3 bg-blue-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transform hover:scale-105 transition duration-300 ease-in-out border border-blue-200 dark:border-gray-600 group">
          <div class="relative w-16 h-16 rounded-full overflow-hidden flex-shrink-0 border-2 border-blue-400 dark:border-blue-500">
            <img src="https://randomuser.me/api/portraits/men/82.jpg" alt="User Avatar" class="w-full h-full object-cover transform scale-105 group-hover:scale-110 transition duration-300 ease-in-out">
            <div class="absolute inset-0 bg-gradient-to-br from-blue-300 via-transparent to-transparent opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
          </div>
          <div class="flex-1">
            <h4 class="text-lg font-semibold text-blue-700 dark:text-blue-300">John Smith</h4>
            <p class="text-sm text-gray-500 dark:text-gray-400">Gamer & foodie</p>
          </div>
          <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 transition duration-300 ease-in-out p-1 rounded-full hover:bg-red-100 dark:hover:bg-gray-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </li>

        <!-- Wishlist Item 3 -->
        <li class="flex items-center space-x-4 p-3 bg-blue-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transform hover:scale-105 transition duration-300 ease-in-out border border-blue-200 dark:border-gray-600 group">
          <div class="relative w-16 h-16 rounded-full overflow-hidden flex-shrink-0 border-2 border-blue-400 dark:border-blue-500">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-full h-full object-cover transform scale-105 group-hover:scale-110 transition duration-300 ease-in-out">
            <div class="absolute inset-0 bg-gradient-to-br from-blue-300 via-transparent to-transparent opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
          </div>
          <div class="flex-1">
            <h4 class="text-lg font-semibold text-blue-700 dark:text-blue-300">Alice Brown</h4>
            <p class="text-sm text-gray-500 dark:text-gray-400">Artist & Traveler</p>
          </div>
          <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 transition duration-300 ease-in-out p-1 rounded-full hover:bg-red-100 dark:hover:bg-gray-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </li>
      </ul>
      
      <div class="mt-6 text-center">
        <button class="w-full py-3 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold rounded-lg shadow-md hover:shadow-lg transform active:scale-95 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
          Suggest New Matches
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom CSS for basic 3D transform, consider using Tailwind's arbitrary values or JIT */
  .perspective-1000 {
    perspective: 1000px;
  }
  .rotateY-3 {
    transform: rotateY(3deg);
  }
  .rotateY-0 {
    transform: rotateY(0deg);
  }
  .translateZ-neg10 {
    transform: translateZ(-10px);
  }
</style>

Wishlist Component

A simple, responsive wishlist component with high-contrast color gradients and smooth transitions, suitable for business/corporate websites. Includes dark mode support.

Open Preview

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

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

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

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

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

Wishlist Component

A minimalist and responsive wishlist component with a multi-color gradient rainbow theme, suitable for news or journalism websites. Includes dark mode support and interactive elements.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">

  <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 mb-6 sm:mb-8 lg:mb-10 text-center dark:from-red-400 dark:via-yellow-400 dark:to-green-400">
    Your Reading List
  </h1>

  <div class="max-w-6xl mx-auto 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-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-pink-500 dark:border-pink-600">
      <img src="https://picsum.photos/400/250?random=1" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">The Future of AI in Journalism: A Deep Dive into Ethical Considerations</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">Explore the ethical dilemmas and opportunities presented by artificial intelligence in the evolving landscape of news reporting and editorial processes.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar">
          <span>Jane Doe</span>
          <span class="mx-2">•</span>
          <span>Mar 10, 2023</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <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" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-purple-500 dark:border-purple-600">
      <img src="https://picsum.photos/400/250?random=2" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">The Comeback of Investigative Reporting: Why It Matters Now More Than Ever</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">In an era of misinformation, a renewed focus on deep, investigative journalism is crucial for a well-informed public and accountable institutions.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author Avatar">
          <span>John Smith</span>
          <span class="mx-2">•</span>
          <span>Feb 28, 2023</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <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" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 3 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-blue-500 dark:border-blue-600">
      <img src="https://picsum.photos/400/250?random=3" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Interactive Storytelling: Engaging Audiences in the Digital Age</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">How news outlets are using immersive technologies and data visualizations to create compelling, interactive narratives that captivate readers.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Author Avatar">
          <span>Emily White</span>
          <span class="mx-2">•</span>
          <span>Jan 15, 2023</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <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" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 4 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-green-500 dark:border-green-600">
      <img src="https://picsum.photos/400/250?random=4" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Local News Revival: Strategies for Sustaining Community Journalism</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">Examining successful models and innovative approaches to reinvigorate local news organizations, ensuring vital information reaches communities.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Author Avatar">
          <span>David Lee</span>
          <span class="mx-2">•</span>
          <span>Jan 01, 2023</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <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" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 5 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-yellow-500 dark:border-yellow-600">
      <img src="https://picsum.photos/400/250?random=5" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">The Psychology of Clickbait: Deconstructing Sensational Headlines</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">An analytical look into the psychological triggers behind clickbait headlines and their impact on journalistic integrity and reader trust.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Author Avatar">
          <span>Sarah Chen</span>
          <span class="mx-2">•</span>
          <span>Dec 18, 2022</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <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" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 6 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-red-500 dark:border-red-600">
      <img src="https://picsum.photos/400/250?random=6" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Fact-Checking in the Digital Age: Tools and Techniques for Journalists</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">A guide to essential resources and methodologies for verifying information and combating the spread of disinformation in online environments.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/6.jpg" alt="Author Avatar">
          <span>Michael Brown</span>
          <span class="mx-2">•</span>
          <span>Nov 05, 2022</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <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" />
            </svg>
          </button>
        </div>
      </div>
    </div>

  </div>
</div>

Glassmorphism Wishlist Component - Agriculture/Farming

A responsive wishlist component with a glassmorphism design style, pastel color scheme, and tailored for agriculture/farming websites. Features frosted glass-like translucent elements with blur effects, semantic HTML, and full dark mode support.

Open Preview

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

Art Deco Wishlist Component

A complex, responsive Art Deco style wishlist component inspired by 1920s-1930s luxury, featuring jewel tones suitable for finance/banking interfaces. Includes dark mode support.

Open Preview

                <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

A complex, responsive wishlist component featuring a Glassmorphism design with ocean/blue tones, optimized for dating/social platforms. Includes dark mode support and interactive elements.

Open Preview

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

Wishlist Component

A responsive wishlist component for sports/fitness applications, featuring microinteractions, high-contrast color scheme, and dark mode support. Users can add/remove items and see visual feedback.

Open Preview

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

Wishlist Component

A complex, responsive wishlist component with a retro/vintage design, earth tone color scheme, and dark mode support, suitable for a blog or content site.

Open Preview

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

Wishlist Component

Wishlist Component with 3D Design, Analogous color scheme, and Simple complexity for Dashboard purpose, with responsive design and dark theme support.

Open Preview

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

Search Components

Categories

Wishlist