네온 글로우 정부 항법

<nav class="bg-gradient-to-r from-pink-100 via-purple-100 to-green-100 dark:from-gray-900 dark:via-gray-800 dark:to-teal-950 p-4 shadow-lg">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <!-- Logo/Brand Section -->
    <a href="#" class="flex items-center space-x-2 text-lg font-bold text-purple-700 dark:text-cyan-400 group relative">
      <svg class="h-8 w-8 text-pink-500 dark:text-teal-400 group-hover:drop-shadow-[0_0_8px_pink] dark:group-hover:drop-shadow-[0_0_8px_teal] transition-all 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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
      </svg>
      <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_rgba(192,38,211,0.8)] dark:group-hover:drop-shadow-[0_0_8px_rgba(45,212,191,0.8)] transition-all duration-300">PublicPulse</span>
      <div class="absolute inset-0 bg-transparent rounded-lg blur-sm group-hover:bg-purple-300/30 dark:group-hover:bg-cyan-600/30 transition-all duration-300 scale-x-0 group-hover:scale-x-100 origin-left"></div>
    </a>

    <!-- Mobile Toggle Button (Hidden on larger screens) -->
    <input type="checkbox" id="menu-toggle" class="hidden peer">
    <label for="menu-toggle" class="cursor-pointer lg:hidden block text-purple-700 dark:text-cyan-400 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-cyan-500 rounded p-2 relative z-20">
      <svg class="h-6 w-6 peer-checked:hidden" 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="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
      <svg class="h-6 w-6 hidden peer-checked:block" 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="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </label>

    <!-- Navigation Links -->
    <div class="w-full lg:flex lg:items-center lg:w-auto mt-4 lg:mt-0 hidden peer-checked:block transition-all duration-500 ease-in-out" id="navbar-default">
      <ul class="flex flex-col lg:flex-row lg:space-x-8 text-sm font-medium w-full lg:w-auto">
        <li>
          <a href="#" class="relative block py-2 px-3 text-pink-600 dark:text-teal-300 rounded hover:bg-pink-200 dark:hover:bg-teal-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-teal-500">
            Home
            <span class="absolute inset-0 z-0 bg-gradient-to-r from-pink-300/30 to-purple-300/30 dark:from-teal-600/30 dark:to-cyan-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
            <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_pink] dark:group-hover:drop-shadow-[0_0_8px_teal]"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative block py-2 px-3 text-purple-600 dark:text-orange-300 rounded hover:bg-purple-200 dark:hover:bg-orange-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-orange-500">
            Services
             <span class="absolute inset-0 z-0 bg-gradient-to-r from-purple-300/30 to-yellow-300/30 dark:from-orange-600/30 dark:to-amber-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
            <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_purple] dark:group-hover:drop-shadow-[0_0_8px_orange]"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative block py-2 px-3 text-green-600 dark:text-lime-300 rounded hover:bg-green-200 dark:hover:bg-lime-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-lime-500">
            About Us
             <span class="absolute inset-0 z-0 bg-gradient-to-r from-green-300/30 to-blue-300/30 dark:from-lime-600/30 dark:to-emerald-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
            <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_green] dark:group-hover:drop-shadow-[0_0_8px_lime]"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative block py-2 px-3 text-blue-600 dark:text-cyan-300 rounded hover:bg-blue-200 dark:hover:bg-cyan-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-cyan-500">
            Contact
             <span class="absolute inset-0 z-0 bg-gradient-to-r from-blue-300/30 to-indigo-300/30 dark:from-cyan-600/30 dark:to-sky-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
            <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_blue] dark:group-hover:drop-shadow-[0_0_8px_cyan]"></span>
          </a>
        </li>
         <li>
          <a href="#" class="relative block py-2 px-3 text-yellow-600 dark:text-amber-300 rounded hover:bg-yellow-200 dark:hover:bg-amber-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-amber-500">
            FAQ
             <span class="absolute inset-0 z-0 bg-gradient-to-r from-yellow-300/30 to-orange-300/30 dark:from-amber-600/30 dark:to-orange-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
            <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_yellow] dark:group-hover:drop-shadow-[0_0_8px_amber]"></span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>