Tailwind Navigation (Horizontal) Components in Bendis library

<section class="py-8 px-4 lg:px-10 bg-blue-800" x-data="{ mobileNavOpen: false }">
  <nav class="relative">
    <div class="flex justify-between items-center">
      <a class="text-xl text-white font-semibold" href="#">
        <img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 rounded">
          <svg class="text-white block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:w-auto lg:space-x-10">
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">About</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Company</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Services</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Testimonials</a></li>
      </ul>
      <div class="hidden lg:block"><a class="inline-block px-4 text-white hover:text-blue-50 font-semibold" href="#">Sign in</a><a class="inline-block px-4 text-white hover:text-blue-50 font-semibold" href="#">Sign up</a></div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-blue-800 opacity-90"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-16 mr-auto text-xl text-blue-800 font-semibold leading-none" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">About</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Company</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Services</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="mt-auto px-10">
        <div class="pt-6"><a class="block mb-2 py-4 text-center text-blue-800 font-semibold" href="#">Sign in</a><a class="block py-4 text-center text-blue-800 leading-normal uppercase border-2 border-blue-800 hover:bg-blue-50 font-semibold" href="#">Sign Up</a></div>
        <p class="mt-6 mb-4 text-sm text-center text-blue-400">
          <span>© 2021 All rights reserved © Wireframes Corporation 2021</span>
        </p>
      </div>
    </nav>
  </div>
</section>