ウィッシュリストコンポーネント

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