<header
  class="sticky top-0 z-50 flex w-full items-center justify-between px-8 py-6 text-gray-50 backdrop-blur-sm md:px-20"
>
  <div class="flex items-center space-x-16">
    <a href="#">
      <img class="h-6 w-full" src="/assets/logo-no-background.png" />
    </a>
    <nav class="flex items-center space-x-4 max-lg:hidden">
      <a href="" class="transition-colors ease-in-out hover:text-primary/80"
        >Link</a
      >
      <a href="" class="transition-colors ease-in-out hover:text-primary/80"
        >Link</a
      >
      <a href="" class="transition-colors ease-in-out hover:text-primary/80"
        >Link</a
      >
      <a
        href=""
        class="group flex items-center space-x-0.5 transition-colors ease-in-out hover:text-primary/80"
      >
        <span>External Link</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="transition-transform ease-in-out group-hover:-translate-y-0.5 group-hover:translate-x-0.5"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M17 7l-10 10" />
          <path d="M8 7l9 0l0 9" /></svg
      ></a>
      <a
        href=""
        class="group flex items-center space-x-0.5 transition-colors ease-in-out hover:text-primary/80"
      >
        <span>External Link</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="transition-transform ease-in-out group-hover:-translate-y-0.5 group-hover:translate-x-0.5"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M17 7l-10 10" />
          <path d="M8 7l9 0l0 9" />
        </svg>
      </a>
    </nav>
  </div>
  <div class="flex items-center space-x-3">
    <button class="rounded-xl p-1">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="20"
        height="20"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="text-primary"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path
          d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"
        />
        <path
          d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"
        />
        <path d="M19 11h2m-1 -1v2" />
      </svg>
    </button>
    <nav class="flex items-center space-x-4 max-lg:hidden">
      <a href="#" class="p-2 text-primary">Sign In</a>
      <a
        href="#"
        class="rounded-full bg-primary p-2 px-6 text-gray-950 transition-colors ease-out hover:bg-primary/80"
        >Sign Up</a
      >
    </nav>
    <button class="rounded-xl p-1 lg:hidden">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="20"
        height="20"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="text-primary"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 6h16" />
        <path d="M7 12h13" />
        <path d="M10 18h10" />
      </svg>
    </button>
  </div>
</header>
#Centered minimal navbar

#Simple navbar with nav on left

#Navbar with external links

#Navbar with centered logo
