Startup Glassmorphism Navbar with Neon Gradient & Floating Navigation

AI startup navbar built with pure HTML and Tailwind CSS.

This tailwind example is contributed by JUGENDRA GANGWAR, on 30-Jun-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is drawer

Header Sidebar Menu Navbar

Author JUGENDRA GANGWAR

Tailwind v3.4 313 3

Fork Fullscreen

<header class="fixed inset-x-0 top-4 z-50 px-4">
  <nav class="mx-auto flex h-16 max-w-6xl items-center justify-between gap-4 rounded-2xl border border-white/10 bg-slate-900/60 px-4 shadow-2xl shadow-fuchsia-500/10 backdrop-blur-2xl supports-[backdrop-filter]:bg-slate-900/40 sm:px-6" aria-label="Main navigation">
    <a href="#" class="flex items-center gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 rounded-lg">
      <span class="relative flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-fuchsia-600 via-violet-600 to-cyan-700">
        <span class="absolute inset-0 rounded-xl bg-gradient-to-br from-fuchsia-500 via-violet-500 to-cyan-400 opacity-60 blur-md"></span>
        <svg class="relative h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="3" stroke-linecap="round" />
          <path stroke-linecap="round" d="M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" />
        </svg>
      </span>
      <span class="bg-gradient-to-r from-white to-slate-300 bg-clip-text text-lg font-semibold tracking-tight text-transparent">TailwindFlex</span>
    </a>

<ul class="hidden items-center gap-1 rounded-full border border-white/10 bg-white/5 p-1 lg:flex">
      <li>
        <a href="#" aria-current="page" class="block rounded-full bg-gradient-to-r from-fuchsia-500/20 to-cyan-400/20 px-4 py-2 text-sm font-medium text-white transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-400">
          Platform
        </a>
      </li>
      <li>
        <a href="#" class="block rounded-full px-4 py-2 text-sm font-medium text-slate-300 transition-all duration-200 hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-400">
          Models
        </a>
      </li>
      <li>
        <a href="#" class="block rounded-full px-4 py-2 text-sm font-medium text-slate-300 transition-all duration-200 hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-400">
          Research
        </a>
      </li>
      <li class="group relative">
        <button type="button" class="flex items-center gap-1 rounded-full px-4 py-2 text-sm font-medium text-slate-300 transition-all duration-200 hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-400">
          Developers
          <svg class="h-3.5 w-3.5 text-slate-400 transition-transform duration-200 group-hover:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
          </svg>
        </button>
        <div class="invisible absolute left-1/2 top-full z-20 w-60 -translate-x-1/2 translate-y-3 rounded-2xl border border-white/10 bg-slate-900/90 p-2 opacity-0 shadow-2xl shadow-black/40 backdrop-blur-2xl transition-all duration-200 group-hover:visible group-hover:translate-y-2 group-hover:opacity-100">
          <a href="#" class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-300 transition-colors duration-150 hover:bg-white/10 hover:text-white">
            <span class="h-1.5 w-1.5 rounded-full bg-fuchsia-400"></span>
            API Documentation
          </a>
          <a href="#" class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-300 transition-colors duration-150 hover:bg-white/10 hover:text-white">
            <span class="h-1.5 w-1.5 rounded-full bg-cyan-400"></span>
            SDKs &amp; Tools
          </a>
          <a href="#" class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-300 transition-colors duration-150 hover:bg-white/10 hover:text-white">
            <span class="h-1.5 w-1.5 rounded-full bg-violet-400"></span>
            Playground
          </a>
        </div>
      </li>
      <li>
        <a href="#" class="block rounded-full px-4 py-2 text-sm font-medium text-slate-300 transition-all duration-200 hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-400">
          Pricing
        </a>
      </li>
      <li>
        <a href="#" class="block rounded-full px-4 py-2 text-sm font-medium text-slate-300 transition-all duration-200 hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-400">
          Company
        </a>
      </li>
    </ul>

<div class="flex items-center gap-2 sm:gap-3">
      <a href="#" class="hidden text-sm font-medium text-slate-300 transition-colors duration-200 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-400 rounded-lg px-2 py-1 sm:inline-block">
        Sign in
      </a>
      <a href="#" class="group relative hidden items-center justify-center overflow-hidden rounded-full px-5 py-2.5 text-sm font-semibold text-white transition-all duration-200 hover:-translate-y-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 sm:inline-flex">
        <span class="absolute inset-0 bg-gradient-to-r from-fuchsia-600 via-violet-600 to-cyan-700"></span>
        <span class="absolute inset-0 bg-gradient-to-r from-fuchsia-500 via-violet-500 to-cyan-400 opacity-0 blur-lg transition-opacity duration-200 group-hover:opacity-70"></span>
        <span class="relative">Get Started</span>
      </a>

<div class="invisible absolute inset-x-4 top-[4.5rem] z-0 origin-top scale-95 rounded-2xl border border-white/10 bg-slate-900/90 p-3 opacity-0 shadow-2xl shadow-black/40 backdrop-blur-2xl transition-all duration-200 peer-checked:visible peer-checked:scale-100 peer-checked:opacity-100 lg:hidden">
        <nav class="flex flex-col gap-1" aria-label="Mobile navigation">
          <a href="#" aria-current="page" class="rounded-xl bg-gradient-to-r from-fuchsia-500/20 to-cyan-400/20 px-4 py-3.5 text-base font-medium text-white transition-colors duration-200">Platform</a>
          <a href="#" class="rounded-xl px-4 py-3.5 text-base font-medium text-slate-300 transition-colors duration-200 hover:bg-white/10 hover:text-white">Models</a>
          <a href="#" class="rounded-xl px-4 py-3.5 text-base font-medium text-slate-300 transition-colors duration-200 hover:bg-white/10 hover:text-white">Research</a>
          <a href="#" class="rounded-xl px-4 py-3.5 text-base font-medium text-slate-300 transition-colors duration-200 hover:bg-white/10 hover:text-white">Developers</a>
          <a href="#" class="rounded-xl px-4 py-3.5 text-base font-medium text-slate-300 transition-colors duration-200 hover:bg-white/10 hover:text-white">Pricing</a>
          <a href="#" class="rounded-xl px-4 py-3.5 text-base font-medium text-slate-300 transition-colors duration-200 hover:bg-white/10 hover:text-white">Company</a>
        </nav>
        <div class="mt-3 flex flex-col gap-2 border-t border-white/10 pt-3">
          <a href="#" class="flex items-center justify-center rounded-xl border border-white/10 px-4 py-3 text-sm font-medium text-slate-200 transition-colors duration-200 hover:bg-white/10">Sign in</a>
          <a href="#" class="flex items-center justify-center rounded-xl bg-gradient-to-r from-fuchsia-600 via-violet-600 to-cyan-700 px-4 py-3 text-sm font-semibold text-white shadow-lg shadow-fuchsia-500/30 transition-transform duration-200 active:scale-[0.98]">Get Started</a>
        </div>
      </div>
    </div>
  </nav>
</header>