Animated Fixed Header Navbar (Tailwind)

<header class="fixed top-4 w-full z-50 animate-slide-down pr-6 pl-6">
      <div class="max-w-6xl bg-neutral-900/40 border-neutral-700/50 border rounded-2xl mr-auto ml-auto pt-4 pr-6 pb-4 pl-6 shadow-2xl backdrop-blur-md">
        <div class="flex items-center justify-between">
          <div class="flex gap-3 items-center">
            <div class="w-8 h-8 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-lg flex items-center justify-center shadow-lg">
              <span class="text-white font-semibold text-sm tracking-tight font-geist">K</span>
            </div>
            <span class="font-medium text-neutral-100 tracking-tight font-geist">Kinetic Studio</span>
          </div>
          
          <nav class="hidden md:flex items-center gap-8 text-sm font-geist">
            <a href="#" class="text-neutral-400 hover:text-neutral-100 transition-colors duration-300 font-geist">Work</a>
            <a href="#" class="text-neutral-400 hover:text-neutral-100 transition-colors duration-300 font-geist">Services</a>
            <a href="#" class="text-neutral-400 hover:text-neutral-100 transition-colors duration-300 font-geist">About</a>
            <a href="#" class="text-neutral-400 hover:text-neutral-100 transition-colors duration-300 font-geist">Contact</a>
          </nav>
          
          <a href="#" class="inline-flex items-center gap-2 text-sm text-neutral-300 hover:text-cyan-400 transition-colors duration-300 group font-geist">
            <span class="hidden sm:inline font-geist">Work with Us</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all duration-300"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
          </a>
        </div>
      </div>
    </header>