Pitchbooking Storybook
Ready for Production

← Back

Navbar

Code:

<header class="fixed top-0 left-0 w-full z-50 p-4">
  <nav class="js-navbar flex flex-wrap bg-white rounded-xl border border-zinc-50 shadow-lg text-zinc-900 overflow-hidden">
    <div class="w-full flex flex-nowrap justify-between items-center p-4 h-20">
      <a href="/">
       <img src="/assets/images/logos/pitchbooking-logo@2x.png" alt="" class="inline-block h-9">
      </a>
      <form class="flex-nowrap justify-between items-center bg-zinc-100 shadow-sm border border-zinc-200 rounded-full mx-4 pr-1 hidden lg:inline-flex">
        <label class="inline-flex flex-nowrap pl-6 pr-10 py-3 w-48">
          <img src="/assets/images/icons/MapPinNav.svg" alt="" class="w-6 mr-2">
          <input type="text" placeholder="Location" class="focus:outline-none bg-transparent font-semibold">
        </label>

        <label class="inline-flex flex-nowrap pl-6 pr-12 py-3 w-48 border-l border-zinc-200">
          <img src="/assets/images/icons/CalendarBlankNav.svg" alt="" class="w-6 mr-2">
          <input type="text" placeholder="Date" class="focus:outline-none bg-transparent font-semibold">
        </label>

        <button type="submit" class="h-10 px-5 flex items-center justify-center rounded-full bg-white border border-zinc-200/50 shadow-sm hover:bg-zinc-900 group/search">
          <img src="/assets/images/icons/MagnifyingGlass.svg" class="group-hover/search:invert">
          <p class="font-medium text-zinc-800 sr-only">Find venues</p>
        </button>
      </form>
  
      <div class="flex flex-nowrap items-center">
        <a href="#" class="hidden lg:inline-block mr-3 px-5 py-2 bg-zinc-50 rounded-full font-medium transition-all hover:bg-zinc-100">Host Now</a>
  
        <button class="border border-zinc-200 p-2 rounded-full mr-3 hidden lg:flex">
          <p class="sr-only">Login</p>
          <img src="/assets/images/icons/User.svg" class="w-8 md:w-6" alt="">
        </button>
  
        <button class="js-nav-menu-toggle lg:hidden">
          <p class="sr-only">Toggle Menu</p>
          <img src="/assets/images/icons/List.svg" class="w-8 md:w-7" alt="">
        </button>
      </div>
    </div>
  
    <div class="js-nav-menu hidden w-full flex-col items-center lg:hidden border-t border-zinc-100 bg-white py-7">
      <div class="px-4 w-full">
        <form class="inline-flex flex-wrap justify-between items-center bg-zinc-100 shadow-sm border border-zinc-200 rounded-lg md:rounded-full px-2 pb-2 md:pl-0 md:pr-1 md:pb-0 w-full">
          <label class="inline-flex flex-nowrap md:pl-6 pr-10 py-3 w-full md:w-48">
            <img src="/assets/images/icons/MapPinNav.svg" alt="" class="w-6 mr-2">
            <input type="text" placeholder="Location" class="focus:outline-none bg-transparent font-semibold">
          </label>
          <label class="inline-flex flex-nowrap md:pl-6 pr-12 py-3 w-full md:w-48 md:border-l border-zinc-200">
            <img src="/assets/images/icons/CalendarBlankNav.svg" alt="" class="w-6 mr-2">
            <input type="text" placeholder="Date" class="focus:outline-none bg-transparent font-semibold">
          </label>
          <button type="submit" class="h-10 px-5 flex items-center justify-center w-full md:w-auto rounded md:rounded-full bg-white border border-zinc-200/50 shadow-sm hover:bg-zinc-900 group/search">
            <img src="/assets/images/icons/MagnifyingGlass.svg" class="group-hover/search:invert">
            <p class="font-medium text-zinc-800 sr-only">Find venues</p>
          </button>
        </form>
      </div>

      <div class="mt-6 pt-6 px-5 border-t border-zinc-100 w-full flex flex-wrap items-center justify-center">
        <a href="#" class="px-6 py-3 m-2 w-full max-w-[15rem] text-center bg-zinc-50 rounded-full font-medium transition-all hover:bg-zinc-100">Host Now</a>
        <button class="border border-zinc-200 px-6 py-3 m-2 w-full max-w-[15rem] rounded-full flex flex-nowrap items-center justify-center">
          <img src="/assets/images/icons/User.svg" class="w-6 mr-2" alt="">
          <p class="font-medium">Login</p>
        </button>
      </div>
    </div>
  </nav>
</header>