<nav class="navbar max-w-6xl flex-wrap mx-auto gap-y-4">
  <span class="navbar-start">
    <button class="btn btn-ghost"> ACME </button>
  </span>

  <div class="navbar-end md:hidden">
    <label for="navigation-button" class="btn btn-circle btn-ghost">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
        class="lucide lucide-menu">
        <line x1="4" x2="20" y1="12" y2="12" />
        <line x1="4" x2="20" y1="6" y2="6" />
        <line x1="4" x2="20" y1="18" y2="18" />
      </svg>
    </label>
  </div>

  <input type="checkbox" id="navigation-button" hidden class="peer/check">

  <ul class="md:navbar-end gap-4 max-md:w-full max-md:peer-checked/check:block max-md:hidden">
    <a href="" class="btn btn-ghost max-md:btn-block"> Home </a>
    <a href="" class="btn btn-ghost max-md:btn-block"> About </a>
    <a href="" class="btn btn-primary max-md:btn-block"> Contact </a>
  </ul>
</nav>

<nav class="navbar max-w-6xl max-sm:flex-wrap mx-auto gap-y-4">
  <span class="navbar-start">
    <button class="btn btn-ghost"> ACME </button>
  </span>

  <div class="sm:hidden navbar-end">
    <label for="navigation-button-1" class="btn btn-circle btn-ghost">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
        class="lucide lucide-menu">
        <line x1="4" x2="20" y1="12" y2="12" />
        <line x1="4" x2="20" y1="6" y2="6" />
        <line x1="4" x2="20" y1="18" y2="18" />
      </svg>
    </label>
  </div>

  <input type="checkbox" hidden id="navigation-button-1" class="peer/check">

  <input type="text" class="input sm:navbar-center max-sm:w-full" placeholder="Search...">

  <ul class="sm:navbar-end gap-4 max-sm:peer-checked/check:block max-sm:hidden max-sm:w-full">
    <a href="" class="btn btn-ghost max-sm:btn-block"> Home </a>
    <a href="" class="btn btn-ghost max-sm:btn-block"> About </a>
    <a href="" class="btn btn-primary max-sm:btn-block"> Contact </a>
  </ul>
</nav>

<nav class="navbar max-w-6xl max-md:flex-wrap mx-auto">
  <span class="navbar-start">
    <button class="btn btn-ghost"> ACME </button>
  </span>

  <div class="navbar-end md:hidden">
    <label for="navigation-button-2" class="btn btn-circle btn-ghost">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
        class="lucide lucide-menu">
        <line x1="4" x2="20" y1="12" y2="12" />
        <line x1="4" x2="20" y1="6" y2="6" />
        <line x1="4" x2="20" y1="18" y2="18" />
      </svg>
    </label>
  </div>

  <input type="checkbox" id="navigation-button-2" class="peer/check" hidden>

  <ul class="md:navbar-end gap-x-4 max-md:w-full max-md:peer-checked/check:block max-md:hidden max-md:space-y-2">
    <details class="dropdown max-md:w-full">
      <summary class="btn btn-ghost max-md:btn-block">
        Home
        <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="lucide lucide-chevron-down">
          <path d="m6 9 6 6 6-6" />
        </svg>
      </summary>

      <ul
        class="menu dropdown-content md:top-16 dropdown-end bg-base-100 shadow-sm max-md:w-full w-52 p-2 rounded-box z-1">
        <li>
          <a href="#">
            Some link
          </a>
        </li>
        <li>
          <a href="#">
            Some link
          </a>
        </li>
        <li>
          <a href="#">
            Some link
          </a>
        </li>
      </ul>

    </details>
    <a href="" class="btn btn-ghost max-md:btn-block"> About </a>
    <a href="" class="btn btn-primary max-md:btn-block"> Contact </a>
  </ul>
</nav>

<nav class="bg-base-200">
  <div class="navbar max-w-6xl max-sm:flex-col mx-auto gap-y-4">
    <span class="sm:navbar-start">
      <button class="btn btn-ghost"> ACME </button>
    </span>

    <input type="text" class="input sm:navbar-end max-sm:w-full" placeholder="Search...">
  </div>

  <hr class="border-base-100">

  <div class="navbar max-w-6xl mx-auto gap-y-4">
    <ul class="sm:navbar-end justify-end !w-full gap-x-4 max-sm:space-y-2">
      <a href="" class="btn btn-ghost max-sm:btn-block"> Home </a>
      <a href="" class="btn btn-ghost max-sm:btn-block"> About </a>
      <a href="" class="btn btn-primary max-sm:btn-block"> Contact </a>
    </ul>
  </div>
</nav>