Header

<header class="relative z-40 border-b border-gray-300 bg-white shadow-sm">
  <div class="mx-auto flex h-12 w-full max-w-7xl items-center justify-between px-5">
    <div class="flex items-center">
      <a class="shrink-0" href="/">
        <img src="https://composedui.com/images/logo.svg" alt="Logo" class="h-10 w-10 object-contain" />
      </a>
    </div>

    <div class="flex items-center justify-center">
      <nav class="flex flex-1 justify-center">
        <ul class="flex space-x-2 text-center text-sm text-gray-900">
          <li>
            <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">Login</a>
          </li>
          <li>
            <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">Signup</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>

<header class="relative z-40 border-b border-gray-300 bg-white shadow-sm" x-data="{ open: false }">
  <div class="mx-auto flex h-12 w-full max-w-7xl items-center px-5">
    <div class="flex flex-1 items-center">
      <a class="inline-flex shrink-0 items-center space-x-2" href="/">
        <img src="https://composedui.com/images/logo.svg" alt="Logo" class="h-10 w-10 object-contain" />
        <span class="text-sm font-medium">Composed UI</span>
      </a>
    </div>

    <div class="hidden items-center lg:flex">
      <nav class="flex justify-center">
        <ul class="flex space-x-1 text-center text-sm text-gray-900">
          <li>
            <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">Discover</a>
          </li>
          <li>
            <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">Features</a>
          </li>
          <li>
            <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">About us</a>
          </li>
          <li>
            <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">Pricing</a>
          </li>
        </ul>
      </nav>
    </div>

    <div class="hidden flex-1 items-center justify-end space-x-2 lg:flex">
      <a href="#" class="block rounded bg-gray-200 py-1.5 px-4 text-center text-sm font-medium text-gray-900 hover:bg-gray-200/80"> Log in </a>
      <a href="#" class="block rounded bg-gray-800 py-1.5 px-4 text-center text-sm font-medium text-white hover:bg-gray-600"> Sign up </a>
    </div>

    <button class="rounded p-2 text-gray-900 hover:bg-gray-100 lg:hidden" x-on:click="open = ! open">
      <!-- Heroicons name: mini/bars-3 -->
      <svg x-show="!open" class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path
          fill-rule="evenodd"
          d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10zm0 5.25a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z"
          clip-rule="evenodd"
        />
      </svg>
      <!-- Heroicons name: mini/x-mark -->
      <svg x-show="open" class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path
          d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
        />
      </svg>
    </button>
  </div>

  <!-- Mobile Menu -->
  <div class="absolute inset-x-0 top-full z-40 border-y border-gray-300 bg-white p-5 shadow lg:!hidden" style="display: none" x-show="open">
    <nav>
      <ul class="space-y-1 text-center text-sm text-gray-900">
        <li>
          <a href="#" class="block rounded-md px-4 py-2 hover:bg-gray-100">Discover</a>
        </li>
        <li>
          <a href="#" class="block rounded-md px-4 py-2 hover:bg-gray-100">Features</a>
        </li>
        <li>
          <a href="#" class="block rounded-md px-4 py-2 hover:bg-gray-100">About us</a>
        </li>
        <li>
          <a href="#" class="block rounded-md px-4 py-2 hover:bg-gray-100">Pricing</a>
        </li>
      </ul>
    </nav>

    <div class="mt-4 space-y-2 sm:flex sm:space-y-0 sm:space-x-2">
      <a href="#" class="block flex-1 rounded bg-gray-200 py-2 px-4 text-center text-sm font-medium text-gray-900 hover:bg-gray-200/80"> Log in </a>
      <a href="#" class="block flex-1 rounded bg-gray-800 py-2 px-4 text-center text-sm font-medium text-white hover:bg-gray-600"> Sign up </a>
    </div>
  </div>
</header>

<header class="relative z-40 border-b border-gray-300 bg-white shadow-sm" x-data="{ open: false }">
  <div class="mx-auto flex h-12 w-full max-w-7xl items-center justify-between px-5 lg:justify-start">
    <div class="hidden flex-1 items-center lg:flex">
      <nav class="flex justify-center">
        <ul class="flex space-x-1 text-center text-sm text-gray-900">
          <li>
            <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">Discover</a>
          </li>
          <li>
            <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">Features</a>
          </li>
          <li>
            <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">About us</a>
          </li>
          <li>
            <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">Pricing</a>
          </li>
        </ul>
      </nav>
    </div>

    <div class="flex items-center justify-center">
      <a class="inline-flex shrink-0 items-center space-x-2" href="/">
        <img src="https://composedui.com/images/logo.svg" alt="Logo" class="h-10 w-10 object-contain" />
        <span class="text-sm font-medium">Composed UI</span>
      </a>
    </div>

    <div class="hidden flex-1 items-center justify-end space-x-2 lg:flex">
      <a href="#" class="block rounded bg-gray-200 py-1.5 px-4 text-center text-sm font-medium text-gray-900 hover:bg-gray-200/80"> Log in </a>
      <a href="#" class="block rounded bg-gray-800 py-1.5 px-4 text-center text-sm font-medium text-white hover:bg-gray-600"> Sign up </a>
    </div>

    <button class="rounded p-2 text-gray-900 hover:bg-gray-100 lg:hidden" x-on:click="open = ! open">
      <!-- Heroicons name: mini/bars-3 -->
      <svg x-show="!open" class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path
          fill-rule="evenodd"
          d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10zm0 5.25a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z"
          clip-rule="evenodd"
        />
      </svg>
      <!-- Heroicons name: mini/x-mark -->
      <svg x-show="open" class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path
          d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
        />
      </svg>
    </button>
  </div>

  <!-- Mobile Menu -->
  <div class="absolute inset-x-0 top-full z-40 border-y border-gray-300 bg-white p-5 shadow lg:!hidden" style="display: none" x-show="open">
    <nav>
      <ul class="space-y-1 text-center text-sm text-gray-900">
        <li>
          <a href="#" class="block rounded-md px-4 py-2 hover:bg-gray-100">Discover</a>
        </li>
        <li>
          <a href="#" class="block rounded-md px-4 py-2 hover:bg-gray-100">Features</a>
        </li>
        <li>
          <a href="#" class="block rounded-md px-4 py-2 hover:bg-gray-100">About us</a>
        </li>
        <li>
          <a href="#" class="block rounded-md px-4 py-2 hover:bg-gray-100">Pricing</a>
        </li>
      </ul>
    </nav>

    <div class="mt-4 space-y-2 sm:flex sm:space-y-0 sm:space-x-2">
      <a href="#" class="block flex-1 rounded bg-gray-200 py-2 px-4 text-center text-sm font-medium text-gray-900 hover:bg-gray-200/80"> Log in </a>
      <a href="#" class="block flex-1 rounded bg-gray-800 py-2 px-4 text-center text-sm font-medium text-white hover:bg-gray-600"> Sign up </a>
    </div>
  </div>
</header>

<header class="relative z-40 border-b border-gray-300 bg-white shadow-sm" x-data="{ open: false }">
  <div class="mx-auto flex h-12 w-full max-w-7xl items-center justify-between px-5">
    <div class="flex items-center space-x-4">
      <div class="flex items-center">
        <a class="inline-flex shrink-0 items-center space-x-2" href="/">
          <img src="https://composedui.com/images/logo.svg" alt="Logo" class="h-10 w-10 object-contain" />
          <span class="text-sm font-medium">Composed UI</span>
        </a>
      </div>

      <div class="hidden items-center lg:flex">
        <nav class="flex justify-center">
          <ul class="flex space-x-1 text-center text-sm text-gray-900">
            <li>
              <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">Discover</a>
            </li>
            <li>
              <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">Features</a>
            </li>
            <li>
              <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">About us</a>
            </li>
            <li>
              <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">Pricing</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

    <div class="hidden items-center justify-end space-x-2 lg:flex">
      <a href="#" class="block rounded bg-gray-200 py-1.5 px-4 text-center text-sm font-medium text-gray-900 hover:bg-gray-200/80"> Log in </a>
      <a href="#" class="block rounded bg-gray-800 py-1.5 px-4 text-center text-sm font-medium text-white hover:bg-gray-600"> Sign up </a>
    </div>

    <button class="rounded p-2 text-gray-900 hover:bg-gray-100 lg:hidden" x-on:click="open = ! open">
      <!-- Heroicons name: mini/bars-3 -->
      <svg x-show="!open" class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path
          fill-rule="evenodd"
          d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10zm0 5.25a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z"
          clip-rule="evenodd"
        />
      </svg>
      <!-- Heroicons name: mini/x-mark -->
      <svg x-show="open" class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path
          d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
        />
      </svg>
    </button>
  </div>

  <!-- Mobile Menu -->
  <div class="absolute inset-x-0 top-full z-40 border-y border-gray-300 bg-white p-5 shadow lg:!hidden" style="display: none" x-show="open">
    <nav>
      <ul class="space-y-1 text-center text-sm text-gray-900">
        <li>
          <a href="#" class="block rounded-md px-4 py-2 hover:bg-gray-100">Discover</a>
        </li>
        <li>
          <a href="#" class="block rounded-md px-4 py-2 hover:bg-gray-100">Features</a>
        </li>
        <li>
          <a href="#" class="block rounded-md px-4 py-2 hover:bg-gray-100">About us</a>
        </li>
        <li>
          <a href="#" class="block rounded-md px-4 py-2 hover:bg-gray-100">Pricing</a>
        </li>
      </ul>
    </nav>

    <div class="mt-4 space-y-2 sm:flex sm:space-y-0 sm:space-x-2">
      <a href="#" class="block flex-1 rounded bg-gray-200 py-2 px-4 text-center text-sm font-medium text-gray-900 hover:bg-gray-200/80"> Log in </a>
      <a href="#" class="block flex-1 rounded bg-gray-800 py-2 px-4 text-center text-sm font-medium text-white hover:bg-gray-600"> Sign up </a>
    </div>
  </div>
</header>

<header class="relative z-40 border-b border-gray-300 bg-white shadow-sm" x-data="{ open: false }">
  <div class="mx-auto flex h-12 w-full max-w-7xl items-center justify-between px-5">
    <div class="flex items-center">
      <a class="inline-flex shrink-0 items-center space-x-2" href="/">
        <img src="https://composedui.com/images/logo.svg" alt="Logo" class="h-10 w-10 object-contain" />
        <span class="text-sm font-medium">Composed UI</span>
      </a>
    </div>
    <div class="flex items-center space-x-4">
      <div class="hidden items-center lg:flex">
        <nav class="flex justify-center">
          <ul class="flex space-x-1 text-center text-sm text-gray-900">
            <li>
              <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">Discover</a>
            </li>
            <li>
              <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">Features</a>
            </li>
            <li>
              <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">About us</a>
            </li>
            <li>
              <a href="#" class="block rounded px-4 py-2 hover:bg-gray-100">Pricing</a>
            </li>
          </ul>
        </nav>
      </div>

      <div class="hidden items-center justify-end space-x-2 lg:flex">
        <a href="#" class="block rounded bg-gray-200 py-1.5 px-4 text-center text-sm font-medium text-gray-900 hover:bg-gray-200/80"> Log in </a>
        <a href="#" class="block rounded bg-gray-800 py-1.5 px-4 text-center text-sm font-medium text-white hover:bg-gray-600"> Sign up </a>
      </div>
    </div>

    <button class="rounded p-2 text-gray-900 hover:bg-gray-100 lg:hidden" x-on:click="open = ! open">
      <!-- Heroicons name: mini/bars-3 -->
      <svg x-show="!open" class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path
          fill-rule="evenodd"
          d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10zm0 5.25a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z"
          clip-rule="evenodd"
        />
      </svg>
      <!-- Heroicons name: mini/x-mark -->
      <svg x-show="open" class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path
          d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
        />
      </svg>
    </button>
  </div>

  <!-- Mobile Menu -->
  <div class="absolute inset-x-0 top-full z-40 border-y border-gray-300 bg-white p-5 shadow lg:!hidden" style="display: none" x-show="open">
    <nav>
      <ul class="space-y-1 text-center text-sm text-gray-900">
        <li>
          <a href="#" class="block rounded-md px-4 py-2 hover:bg-gray-100">Discover</a>
        </li>
        <li>
          <a href="#" class="block rounded-md px-4 py-2 hover:bg-gray-100">Features</a>
        </li>
        <li>
          <a href="#" class="block rounded-md px-4 py-2 hover:bg-gray-100">About us</a>
        </li>
        <li>
          <a href="#" class="block rounded-md px-4 py-2 hover:bg-gray-100">Pricing</a>
        </li>
      </ul>
    </nav>

    <div class="mt-4 space-y-2 sm:flex sm:space-y-0 sm:space-x-2">
      <a href="#" class="block flex-1 rounded bg-gray-200 py-2 px-4 text-center text-sm font-medium text-gray-900 hover:bg-gray-200/80"> Log in </a>
      <a href="#" class="block flex-1 rounded bg-gray-800 py-2 px-4 text-center text-sm font-medium text-white hover:bg-gray-600"> Sign up </a>
    </div>
  </div>
</header>