Tailwind Headers Components

<section class="relative pb-20 bg-gray-800 overflow-hidden">
  <div class="absolute bottom-0 inset-x-0 h-full bg-gradient-zospace-1"></div>
  <div class="absolute bottom-0 inset-x-0 h-3/5 w-2full -ml-64 -mb-12 bg-gradient-zospace-2 transform -rotate-6"></div>
  <nav class="relative">
    <div class="flex py-8 px-4 lg:px-8 justify-between items-center">
      <button class="p-2 navbar-burger">
        <svg class="w-10 h-3" width="39" height="13" viewbox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="39" height="2" rx="1" fill="#C4C4C4"></rect><rect x="19" y="11" width="20" height="2" rx="1" fill="#C4C4C4"></rect></svg>
      </button>
      <div class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2">
        <a class="text-2xl text-white font-bold" href="#">
          <img class="h-7" src="zospace-assets/logos/zospace-logo.svg" alt="" width="auto">
        </a>
      </div>
      <div class="hidden lg:block"><a class="inline-block mr-10 text-lg text-white hover:text-gray-50 font-bold border-b border-gray-200" href="#">Try for free!</a><a class="inline-block px-12 py-4 text-white font-bold border border-gray-200 hover:border-white rounded-full" href="#">Sign Up</a></div>
    </div>
  </nav>
  <div class="relative container px-4 pt-12 md:pt-20 mx-auto">
    <div class="hidden 2xl:block absolute bottom-0 w-3/5 mb-40 h-2 border-b border-white"></div>
    <div class="relative flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 2xl:w-2/5 px-4 mb-12 mb:mb-0">
        <span class="text-xl lg:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-yellow-200 to-orange-600">Two ways to start!</span>
        <h2 class="max-w-lg lg:max-w-md 2xl:max-w-none mt-7 mb-12 mb:mb-20 text-6xl lg:text-7xl 2xl:text-9xl text-white font-bold font-heading">Get perfect app for your project</h2>
        <p class="mb-12 lg:mb-24 text-lg text-white opacity-90">Discover how it works and start for free.</p>
        <div class="flex flex-wrap items-center">
          <a class="inline-block mr-14 px-12 py-5 text-lg text-white font-bold bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200" href="#">Get started</a>
          <div class="w-full sm:w-auto mt-8 sm:mt-0 flex">
            <button class="p-2">
              <svg width="11" height="20" viewbox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.7597 18.6258C11.0801 18.942 11.0801 19.4502 10.7597 19.7641C10.4393 20.0781 9.92164 20.0792 9.60124 19.7641L0.240298 10.569C-0.0801018 10.255 -0.0801017 9.74688 0.240298 9.43061L9.60124 0.235462C9.92164 -0.0784849 10.4393 -0.0784848 10.7597 0.235462C11.0801 0.550571 11.0801 1.05986 10.7597 1.37381L2.22247 10.0004L10.7597 18.6258Z" fill="white"></path>
              </svg>
            </button>
            <span class="py-2 px-4">
              <svg width="2" height="24" viewbox="0 0 2 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 0L1 24" stroke="white" stroke-opacity="0.24"></path>
              </svg>
            </span>
            <button class="p-2">
              <svg width="11" height="20" viewbox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.2403 1.37424C-0.0801003 1.05797 -0.0801003 0.549844 0.2403 0.235898C0.5607 -0.0780496 1.07836 -0.0792131 1.39876 0.235898L10.7597 9.43104C11.0801 9.74499 11.0801 10.2531 10.7597 10.5694L1.39876 19.7645C1.07836 20.0785 0.560699 20.0785 0.240298 19.7645C-0.0801019 19.4494 -0.0801019 18.9401 0.240298 18.6262L8.77752 9.99964L0.2403 1.37424Z" fill="white"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 2xl:w-3/5 px-4">
        <img class="w-full h-full object-contain" src="zospace-assets/images/two-phones.png" alt="">
      </div>
    </div>
  </div>
  <div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative flex flex-col py-8 h-full w-full bg-white overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-10 mr-auto text-2xl text-gray-800 font-bold" href="#">
          <img class="h-7" src="zospace-assets/logos/zospace-dark-logo.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Product</a></li>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Story</a></li>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Features</a></li>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="mt-auto px-10">
        <div class="pt-6"><a class="block mb-4 py-4 px-12 text-gray-800 text-center font-bold border border-gray-50 hover:border-gray-100 rounded-full" href="#">Sign in</a><a class="block py-4 px-12 text-white text-center font-bold bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200" href="#">Sign up</a></div>
        <p class="mt-6 mb-4 text-lg text-center">
          <span>2021 &copy; Zospace. All rights reserved.</span>
        </p>
      </div>
    </nav>
  </div>
</section>