Navbar

<nav aria-label="Main navigation" class="bb-1 bc-silver-4 bg-white px-6 py-4">
  <div class="ai-c d-f jc-sb max-w-xl mx-auto">
    <div class="d-f ai-c g-6">
      <a href="#" class="fs-xl fw-600 tc-black td-none">Brand</a>
      <ul class="d-none md:d-f g-6 ls-none p-0 m-0">
        <li>
          <a href="#" class="fs-sm h:tc-black tc-slate-7 td-none">Product</a>
        </li>
        <li>
          <a href="#" class="fs-sm h:tc-black tc-slate-7 td-none">Resources</a>
        </li>
        <li>
          <a href="#" class="fs-sm h:tc-black tc-slate-7 td-none">Pricing</a>
        </li>
      </ul>
    </div>

    <div class="d-none md:d-block">
      <a href="#" class="b-1 bc-silver-4 fs-sm h:bg-silver-1 px-4 py-2 rad-0 tc-black td-none f:oc-silver-1 f:os-s f:ow-2">Sign in</a>
    </div>

    <button
      type="button"
      aria-expanded="false"
      aria-controls="mobile-menu"
      aria-label="Open main menu"
      class="d-f ai-c jc-c c-p rad-0 px-2 py-2 b-1 bc-silver-4 bg-white h:bg-silver-2 d-f md:d-none f:oc-silver-1 f:os-s f:ow-2"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5 tc-black"
        viewBox="0 0 256 256"
        aria-hidden="true"
      >
        <rect width="256" height="256" fill="none" />
        <line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
        <line x1="40" y1="64" x2="216" y2="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
        <line x1="40" y1="192" x2="216" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
      </svg>
    </button>
  </div>

  <!-- Mobile Menu Content (Hidden by default) -->
  <div id="mobile-menu" class="d-none md:d-none mt-4">
    <ul class="d-f fd-c g-4 ls-none p-0 m-0">
      <li>
        <a href="#" class="d-block fs-sm h:tc-black tc-slate-7 td-none py-2">Product</a>
      </li>
      <li>
        <a href="#" class="d-block fs-sm h:tc-black tc-slate-7 td-none py-2">Resources</a>
      </li>
      <li>
        <a href="#" class="d-block fs-sm h:tc-black tc-slate-7 td-none py-2">Pricing</a>
      </li>
      <li class="bt-1 bc-silver-4 pt-4">
        <a href="#" class="d-block fs-sm h:tc-black tc-slate-7 td-none py-2">Sign in</a>
      </li>
    </ul>
  </div>
</nav>

<nav aria-label="Main navigation" class="bb-1 bc-silver-4 bg-white px-6 py-4">
  <div class="ai-c d-f jc-sb max-w-xl mx-auto">
    <a href="#" class="fs-xl fw-600 tc-black td-none">Brand</a>

    <ul class="ai-c d-none md:d-f g-6 ls-none p-0 m-0">
      <li>
        <a href="#" class="fs-sm h:tc-black tc-slate-7 td-none">Product</a>
      </li>
      <li>
        <a href="#" class="fs-sm h:tc-black tc-slate-7 td-none">Resources</a>
      </li>
      <li>
        <a href="#" class="fs-sm h:tc-black tc-slate-7 td-none">Pricing</a>
      </li>
    </ul>

    <div class="ai-c d-none g-3 md:d-f">
      <a href="#" class="b-1 bc-silver-4 fs-sm h:bg-silver-1 px-4 py-2 rad-0 tc-black td-none f:oc-silver-1 f:os-s f:ow-2">Sign in</a>
    </div>

    <button
      type="button"
      aria-expanded="false"
      aria-controls="mobile-menu-center"
      aria-label="Open main menu"
      class="d-f ai-c jc-c c-p rad-0 px-2 py-2 b-1 bc-silver-4 bg-white h:bg-silver-2 d-f md:d-none f:oc-silver-1 f:os-s f:ow-2"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5 tc-black"
        viewBox="0 0 256 256"
        aria-hidden="true"
      >
        <rect width="256" height="256" fill="none" />
        <line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
        <line x1="40" y1="64" x2="216" y2="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
        <line x1="40" y1="192" x2="216" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
      </svg>
    </button>
  </div>

  <!-- Mobile Menu Content (Hidden by default) -->
  <div id="mobile-menu-center" class="d-none md:d-none mt-4">
    <ul class="d-f fd-c g-4 ls-none p-0 m-0">
      <li>
        <a href="#" class="d-block fs-sm h:tc-black tc-slate-7 td-none py-2">Product</a>
      </li>
      <li>
        <a href="#" class="d-block fs-sm h:tc-black tc-slate-7 td-none py-2">Resources</a>
      </li>
      <li>
        <a href="#" class="d-block fs-sm h:tc-black tc-slate-7 td-none py-2">Pricing</a>
      </li>
      <li class="bt-1 bc-silver-4 pt-4">
        <a href="#" class="d-block fs-sm h:tc-black tc-slate-7 td-none py-2">Sign in</a>
      </li>
    </ul>
  </div>
</nav>