Tailwind Headers Components

<section class="pb-64 bg-gray-100 overflow-hidden">
  <nav class="relative bg-gray-900 px-6 sm:px-12 pt-4">
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
      <a class="inline-block" href="#">
        <img src="wrexa-assets/logos/logo-wrexa.svg" alt="" width="auto">
      </a>
    </div>
    <div class="3xl:hidden pb-4">
      <button class="flex navbar-burger ml-auto items-center justify-center w-14 h-14 rounded-full bg-white hover:bg-gray-200">
        <svg width="20" height="9" viewbox="0 0 20 9" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.75" y1="1.25" x2="19.25" y2="1.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line><line x1="0.75" y1="8.25" x2="13.25" y2="8.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line></svg>
      </button>
    </div>
    <div class="hidden 3xl:block">
      <div class="pb-2"><a class="inline-block mr-6 text-xs text-gray-400 hover:text-gray-300" href="#">Account</a><a class="inline-block text-xs text-gray-400 hover:text-gray-300" href="#">Saved</a></div>
      <div>
        <div class="flex relative">
          <div class="w-5/12 mr-auto">
            <div class="pt-5 pr-24 border-t border-gray-100 border-opacity-10">
              <ul class="flex items-center justify-end">
                <li class="mr-6">
                  <a class="inline-flex items-center pb-5 pr-8 text-sm text-white hover:text-gray-200" href="#">
                    <span class="mr-4">Collection</span>
                    <svg width="12" height="7" viewbox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10 2L6 6L2 2" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                  <div class="border-b-4 border-lime-900"></div>
                </li>
                <li class="pb-6 mr-20"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">Projects</a></li>
                <li class="pb-6"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">About</a></li>
              </ul>
            </div>
          </div>
          <div class="w-auto 3xl:w-3/12 mr-4 3xl:mr-12">
            <div class="pt-5 2xl:pl-10 3xl:pl-24 border-t border-gray-100 border-opacity-10">
              <div style="height: 1px;"></div>
              <ul class="flex items-center">
                <li class="pb-6 mr-12">
                  <a class="inline-flex items-center text-sm text-white hover:text-gray-200" href="#">
                    <span class="mr-4">How to Start</span>
                    <svg width="12" height="7" viewbox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10 2L6 6L2 2" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                </li>
                <li class="pb-6"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">Design</a></li>
              </ul>
            </div>
          </div>
          <div class="w-auto flex-shrink-0">
            <div class="flex -mt-4 items-center">
              <a class="inline-block w-full sm:w-auto px-7 py-4 mr-12 text-center font-medium text-white border border-white hover:border-gray-200 hover:text-gray-200 rounded" href="#">Get Started</a>
              <button class="flex items-center justify-center w-14 h-14 rounded-full bg-white hover:bg-gray-200">
                <svg width="20" height="9" viewbox="0 0 20 9" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.75" y1="1.25" x2="19.25" y2="1.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line><line x1="0.75" y1="8.25" x2="13.25" y2="8.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line></svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div class="flex flex-wrap">
    <div class="w-full lg:w-2/5 xl:w-1/2 relative order-last lg:order-first">
      <img class="block w-full h-192 object-cover" src="wrexa-assets/images/people-havinf-fun-placeholder.png" alt="">
      <div class="h-26 bg-white"></div>
      <div class="absolute bottom-0 right-0 w-full sm:w-auto -mb-32 sm:mr-6 xl:mr-24 px-4">
        <div class="max-w-sm mx-auto px-6 pt-5 pb-18 bg-white shadow rounded-xl">
          <div class="flex mb-16 items-center justify-between">
            <button class="inline-flex items-center justify-center w-10 h-10 bg-indigo-500 hover:bg-indigo-600 text-white rounded" role="button">
              <svg width="10" height="10" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3.60156" width="2.4" height="10.4" rx="1" fill="currentColor"></rect><rect x="9.60156" y="4" width="2.4" height="9.6" rx="1" transform="rotate(90 9.60156 4)" fill="currentColor"></rect></svg>
            </button>
            <svg width="35" height="35" viewbox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="17" cy="18" r="16.5" stroke="black" stroke-opacity="0.12"></circle>
              <path d="M16.8645 1.27174C26.1782 1.27174 33.7285 8.82201 33.7285 18.1357" stroke="#5B2FE2" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </div>
          <img class="block mx-auto mb-12" src="wrexa-assets/images/green-chair.png" alt="">
          <div class="flex items-center justify-center">
            <a class="inline-block" href="#">
              <svg width="7" height="12" viewbox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5 10L1 6L5 2" stroke="#232126" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
              </svg>
            </a>
            <a class="block mx-14 text-center" href="#">
              <h3 class="text-2xl">Kirk Oak</h3>
              <span class="text-xs text-gray-400">New in</span>
            </a>
            <a class="inline-block" href="#">
              <svg width="7" height="12" viewbox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2 2L6 6L2 10" stroke="#232126" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="w-full lg:w-3/5 xl:w-1/2 bg-gray-800 relative">
      <div class="px-4 pt-32 pb-16">
        <div class="max-w-lg mx-auto">
          <div class="mb-32">
            <h1 class="font-heading text-5xl sm:text-6xl text-white mb-10">Find your editor and create your home.</h1>
            <a class="inline-flex items-center text-lg text-white" href="#">
              <span class="mr-6">Exploring the shift of today</span>
              <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="white"></path>
              </svg>
            </a>
          </div>
          <a class="inline-block w-full sm:w-auto px-7 py-4 mb-40 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Discover Now</a>
          <div><a class="inline-block mr-24 text-gray-500 hover:text-gray-400 text-sm" href="#">Let&rsquo;s talk</a><a class="inline-block text-gray-500 hover:text-gray-400 text-sm" href="#">Scroll for more</a></div>
        </div>
      </div>
      <div class="hidden sm:block absolute bottom-0 right-0 h-26 w-26 bg-white">
        <div class="absolute bottom-0 left-1/2 mb-8 transform translate-x-1/2">
          <div class="h-26 w-px bg-white"></div>
          <div class="h-18 w-px bg-gray-800"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 sm:max-w-xs z-50">
    <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative flex flex-col pt-12 pb-40 h-full w-full bg-gray-200 overflow-y-auto">
      <div class="px-12">
        <div>
          <a class="inline-block mb-52" href="#">
            <img src="wrexa-assets/logos/logo-wrexa.svg" alt="" width="auto">
          </a>
          <button type="button" aria-label="Close"></button>
        </div>
        <ul>
          <li class="mb-6">
            <a class="flex items-center justify-between" href="#">
              <span>Collection</span>
              <svg width="12" height="7" viewbox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 2L6 6L2 2" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
              </svg>
            </a>
          </li>
          <li class="mb-6"><a class="inline-block" href="#">Projects</a></li>
          <li class="mb-16"><a class="inline-block" href="#">About</a></li>
          <li class="mb-6"><a class="inline-block" href="#">How to Start</a></li>
          <li><a class="inline-block" href="#">Design</a></li>
        </ul>
      </div>
    </nav>
    <div class="absolute bottom-0 left-0 w-full">
      <a class="flex items-center pt-4 pb-5 pl-6 pr-4 bg-white" href="#">
        <div class="relative mr-4">
          <img class="w-12 h-12 rounded-full" src="wrexa-assets/images/avatar2.png" alt="">
          <div class="absolute bottom-0 left-0 -ml-2 flex items-center justify-center w-6 h-6 bg-green-800 rounded-full text-white text-xs">1</div>
        </div>
        <div class="pr-5 mr-auto">
          <h4 class="text-xs text-gray-400">Account</h4>
          <span>matloay</span>
        </div>
        <svg width="12" height="7" viewbox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 2L6 6L2 2" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
        </svg>
      </a>
    </div>
  </div>
</section>