<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>