ArtDeco_Neon_Photography_Navigation

<nav class="bg-gradient-to-r from-purple-900 via-pink-800 to-indigo-900 dark:from-purple-950 dark:via-pink-900 dark:to-indigo-950 p-4 shadow-xl font-['Georgia',_serif]">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="text-white tracking-widest text-3xl font-bold uppercase select-none relative group">
      <span class="relative z-10">LUMINA</span>
      <span class="absolute inset-0 bg-gradient-to-br from-pink-500 to-blue-500 blur-sm opacity-0 group-hover:opacity-75 transition-opacity duration-300"></span>
      <span class="absolute inset-0 bg-gradient-to-br from-pink-400 to-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform group-hover:scale-105"></span>
    </a>

    <div class="block lg:hidden">
      <button class="flex items-center px-3 py-2 border-2 rounded text-white border-neon-blue-400 hover:text-neon-pink-400 hover:border-neon-pink-400 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-neon-blue-300">
        <svg class="fill-current h-6 w-6" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/>
        </svg>
      </button>
    </div>

    <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block" id="navbar-default">
      <ul class="text-sm lg:flex flex-1 items-center lg:justify-end uppercase tracking-wide">
        <li>
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-blue-300 transition-colors duration-300 px-4 py-2 relative group">
            Gallery
            <span class="block h-0.5 bg-neon-blue-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
          </a>
        </li>
        <li>
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-pink-300 transition-colors duration-300 px-4 py-2 relative group">
            Portfolio
            <span class="block h-0.5 bg-neon-pink-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
          </a>
        </li>
        <li>
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-green-300 transition-colors duration-300 px-4 py-2 relative group">
            About
            <span class="block h-0.5 bg-neon-green-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
          </a>
        </li>
        <li>
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-yellow-300 transition-colors duration-300 px-4 py-2 relative group">
            Contact
            <span class="block h-0.5 bg-neon-yellow-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>