Floating pill nav

Build a floating pill navigation with Tailwind CSS: a fixed, centered, fully rounded bar that hovers a few pixels below the top of the viewport with a translucent white background, backdrop blur, a hairline border, and a soft shadow. Inside, a compact logo mark, a divider, three or four links with rounded hover backgrounds and one active link with a filled pill, then a small dark CTA button at the end. Keep the whole bar to a width that hugs its content and hide the middle links below md.

<header class="fixed inset-x-0 top-4 z-50 flex justify-center px-4">
  <nav class="flex items-center gap-1 rounded-full border border-neutral-200/80 bg-white/80 p-1.5 pl-4 shadow-lg shadow-neutral-900/5 backdrop-blur-md">
    <a href="#" class="flex items-center gap-2 pr-2 text-sm font-semibold text-neutral-900">
      <span class="h-5 w-5 rounded-md bg-neutral-900"></span> Orbit
    </a>
    <span class="mx-1 hidden h-5 w-px bg-neutral-200 md:block"></span>
    <div class="hidden items-center gap-0.5 text-sm md:flex">
      <a href="#" class="rounded-full bg-neutral-100 px-3.5 py-1.5 font-medium text-neutral-900">Overview</a>
      <a href="#" class="rounded-full px-3.5 py-1.5 text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900">Pricing</a>
      <a href="#" class="rounded-full px-3.5 py-1.5 text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900">Changelog</a>
      <a href="#" class="rounded-full px-3.5 py-1.5 text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900">Docs</a>
    </div>
    <a href="#" class="ml-1 rounded-full bg-neutral-900 px-4 py-1.5 text-sm font-medium text-white transition hover:bg-neutral-800">Sign in</a>
  </nav>
</header>