Navbar - forms text input

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container flex px-8">
    <form>
      <label for="name">Enter your name:</label>
      <input
        id="name"
        name="name"
        type="text"
        placeholder="Jane Smith"
        required
        class="outline-1 rounded-sm pl-1 bg-slate-50 text-bsk-blue"
      />
    </form>
  </div>
</nav>

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container flex px-8">
    <a href="#" class="px-3 py-2 mx-2 rounded hover:bsk-bg-blue-hover">Item 1</a>
    <form class="translate-y-[7px]">
      <label for="name">Enter your name:</label>
      <input
        id="name"
        name="name"
        type="text"
        placeholder="Jane Smith"
        required
        class="outline-1 rounded-sm ml-1 pl-1 bg-slate-50 text-bsk-blue"
      />
    </form>
  </div>
</nav>

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container flex px-8">
    <a href="#" class="px-3 py-2 mx-2">BAS Style Kit Testbed</a>
    <form class="translate-y-[7px]">
      <label for="name">Enter your name:</label>
      <input
        id="name"
        name="name"
        type="text"
        placeholder="Jane Smith"
        required
        class="outline-1 rounded-sm ml-1 pl-1 bg-slate-50 text-bsk-blue"
      />
    </form>
  </div>
</nav>