Neon_Glow_Pagination_Sports_Fitness

<nav class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <ul class="flex list-none p-0 m-0 rounded-lg shadow-lg dark:shadow-xl">
    <li>
      <a href="#" class="relative block px-4 py-2 text-fuchsia-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-fuchsia-400 dark:hover:bg-gray-600 rounded-l-lg transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">&laquo; Previous</span>
        <span class="absolute inset-0 bg-fuchsia-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-fuchsia-500 rounded-l-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
      </a>
    </li>
    <li>
      <a href="#" class="relative block px-4 py-2 text-emerald-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-emerald-400 dark:hover:bg-gray-600 transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">1</span>
        <span class="absolute inset-0 bg-emerald-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
      </a>
    </li>
    <li>
      <a href="#" aria-current="page" class="relative block px-4 py-2 text-cyan-500 bg-gray-300 dark:bg-gray-600 font-bold glow-effect-active transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">2</span>
        <span class="absolute inset-0 bg-cyan-700 opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-cyan-500 scale-105-outline-sm"></span>
      </a>
    </li>
    <li>
      <a href="#" class="relative block px-4 py-2 text-emerald-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-emerald-400 dark:hover:bg-gray-600 transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">3</span>
        <span class="absolute inset-0 bg-emerald-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
      </a>
    </li>
    <li class="sm:block hidden">
      <a href="#" class="relative block px-4 py-2 text-emerald-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-emerald-400 dark:hover:bg-gray-600 transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">4</span>
        <span class="absolute inset-0 bg-emerald-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
      </a>
    </li>
    <li>
      <a href="#" class="relative block px-4 py-2 text-fuchsia-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-fuchsia-400 dark:hover:bg-gray-600 rounded-r-lg transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">Next &raquo;</span>
        <span class="absolute inset-0 bg-fuchsia-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-fuchsia-500 rounded-r-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
      </a>
    </li>
  </ul>
</nav>

<style>
  /* Custom CSS for the glowing active state and outline effect */
  .glow-effect-active {
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.7), 0 0 16px rgba(6, 182, 212, 0.5), 0 0 24px rgba(6, 182, 212, 0.3);
    transform: scale(1.05);
    position: relative;
    z-index: 20;
  }

  .dark .glow-effect-active {
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.7), 0 0 16px rgba(34, 211, 238, 0.5), 0 0 24px rgba(34, 211, 238, 0.3);
  }

  /* Outline effect for hover */
  .group:hover .scale-105, .group:hover .scale-105-outline-sm {
    transform: scale(1.05);
  }

   .scale-105-outline-sm {
    position: absolute;
    inset: 0;
    border: 2px solid theme('colors.cyan.500'); /* Use Tailwind config for consistency */
    border-radius: inherit; /* Inherit border-radius from parent if applies */
    opacity: 1;
    filter: drop-shadow(0 0 4px theme('colors.cyan.500'));
    transition: transform 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
  }

  .dark .scale-105-outline-sm {
    border-color: theme('colors.cyan.400');
    filter: drop-shadow(0 0 4px theme('colors.cyan.400'));
  }

  /* Small adjustment for responsiveness on smaller screens */
  @media (max-width: 640px) {
    .glow-effect-active {
      transform: scale(1.03);
    }
    .group:hover .scale-105, .group:hover .scale-105-outline-sm {
      transform: scale(1.03);
    }
  }
</style>