Tailwind Components in Suncealand library

<section class="relative xl:pb-52 bg-black overflow-hidden">
  <div class="hidden xl:block absolute bottom-0 left-0 ml-20 2xl:ml-52 px-20">
    <img class="animate-bouncingSlow max-w-sm xl:max-w-md -mb-20" src="suncealand-assets/background/red-lines.svg" alt="">
    <img class="absolute top-0 left-1/2 mt-20 transform -translate-x-1/2" src="suncealand-assets/images/apps-avatar-dashboard-app.png" alt="">
  </div>
  <nav class="relative z-10">
    <div class="flex px-4 md:px-14 py-6 items-center relative">
      <a class="inline-block text-2xl font-bold mr-8 xl:mr-17" href="#">
        <img src="suncealand-assets/logos/suncealand-white.svg" alt="">
      </a>
      <div class="hidden lg:block relative w-full max-w-xs xl:max-w-md 2xl:max-w-lg mr-8 xl:mr-20 2xl:mr-52">
        <input class="w-full pl-20 py-5 pr-5 h-14 bg-gray-900 rounded-lg placeholder-gray-300 text-gray-300 outline-none" type="search" placeholder="Search">
        <button class="inline-block absolute top-1/2 left-0 ml-8 transform -translate-y-1/2" type="submit">
          <svg width="23" height="21" viewbox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="9" stroke="white" stroke-width="2"></circle><rect x="16" y="15.4142" width="2" height="7.1336" rx="1" transform="rotate(-45 16 15.4142)" fill="white"></rect></svg>
        </button>
      </div>
      <div class="hidden lg:block">
        <ul class="flex items-center">
          <li class="relative group mr-14">
            <button class="inline-block text-left text-base font-medium text-white">
              <div class="flex items-center">
                <span class="mr-3">Resources</span>
                <svg width="12" height="7" viewbox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.332 0.999974L10.3887 0.0566406L6.66536 3.77997L5.9987 4.5L5.33203 3.77997L1.6087 0.0566402L0.665365 0.999974L5.9987 6.33331L11.332 0.999974Z" fill="currentColor"></path>
                </svg>
              </div>
            </button>
            <div class="hidden group-hover:block absolute z-20 bottom-0 left-0 w-52 pt-4 transform translate-y-full">
              <div class="py-4 px-6 bg-white rounded-lg border-2 border-blueGray-900"><a class="block mb-2 text-xs" href="#">Link 1</a><a class="block mb-2 text-xs" href="#">Link 1</a><a class="block text-xs" href="#">Link 1</a></div>
            </div>
          </li>
          <li><a class="inline-block text-base font-medium text-white" href="#">Community</a></li>
        </ul>
      </div>
      <div class="hidden lg:block ml-auto">
        <a class="relative group inline-flex h-12 w-24 items-center justify-center border border-white rounded-lg overflow-hidden" href="#">
          <span class="relative z-10 font-semibold text-white group-hover:text-black transition duration-500">Login</span>
          <div class="absolute top-0 left-0 h-full w-28 transform -translate-x-full -ml-1 group-hover:-translate-x-0 bg-white transition duration-500 ease-linear"></div>
        </a>
      </div>
      <button class="lg:hidden ml-auto navbar-burger flex p-1 items-center text-white">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
  </nav>
  <div class="container px-4 mx-auto">
    <div class="relative pt-28 xl:pt-52 mb-24 xl:mb-0">
      <div class="max-w-lg mx-auto xl:mr-0 relative">
        <div class="inline-flex items-center mb-8">
          <span class="block w-2 h-2 mr-2 rounded-full bg-indigo-500"></span>
          <span class="uppercase text-sm text-gray-100 font-medium tracking-tight">Explore new web</span>
        </div>
        <h1 class="text-6xl sm:text-8xl xl:text-9xl font-heading text-white mb-12">Little things do make a difference.</h1>
        <p class="text-lg text-gray-100 mb-20">Record your audio and upload it now.</p>
        <div class="flex flex-col sm:flex-row">
          <a class="group relative inline-block h-16 w-full sm:w-48 mb-4 sm:mb-0 sm:mr-6 bg-white rounded" href="#">
            <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
              <div class="flex h-full w-full items-center justify-center bg-blue-500 border-2 border-white rounded">
                <span class="text-base font-semibold text-black uppercase">Get started</span>
              </div>
            </div>
          </a>
          <a class="group relative inline-block h-16 w-full sm:w-48 bg-white rounded" href="#">
            <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
              <div class="flex h-full w-full items-center justify-center bg-yellow-500 border-2 border-white rounded">
                <span class="text-base font-semibold text-black uppercase">Download</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="xl:hidden relative">
      <img class="animate-bouncingSlow h-135 mx-auto -mb-12" src="suncealand-assets/background/red-lines.svg" alt="">
      <img class="absolute top-0 left-1/2 w-full xs:max-w-md transform -translate-x-1/2" src="suncealand-assets/images/apps-avatar-dashboard-app.png" alt="">
    </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 backdrop-blur-xl backdrop-filter bg-gray-900 bg-opacity-80"></div>
    <nav class="relative pt-8 pb-8 bg-white h-full overflow-y-auto">
      <div class="flex flex-col px-6 h-full">
        <a class="inline-block text-2xl font-bold ml-8 mb-16" href="#">
          <img src="suncealand-assets/logos/suncealand-dark.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li class="group mb-6">
            <button class="inline-block text-left text-base font-medium text-black">
              <div class="flex items-center">
                <span class="mr-3">Resources</span>
                <svg width="12" height="7" viewbox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.332 0.999974L10.3887 0.0566406L6.66536 3.77997L5.9987 4.5L5.33203 3.77997L1.6087 0.0566402L0.665365 0.999974L5.9987 6.33331L11.332 0.999974Z" fill="currentColor"></path>
                </svg>
              </div>
            </button>
            <div class="hidden group-hover:block pt-4">
              <div class="pl-6"><a class="block mb-2 text-black" href="#">Link 1</a><a class="block mb-2 text-black" href="#">Link 1</a><a class="block text-black" href="#">Link 1</a></div>
            </div>
          </li>
          <li class="mb-6"><a class="inline-block text-base font-medium text-black" href="#">Community</a></li>
          <li class="mb-6"><a class="inline-block text-base font-medium text-black" href="#">Story</a></li>
          <li><a class="inline-block text-base font-medium text-black" href="#">Pricing</a></li>
        </ul>
        <div class="w-full">
          <a class="relative group inline-flex h-12 w-full mb-4 items-center justify-center font-semibold rounded-lg bg-white border border-black" href="#">
            <span class="text-black">Login</span>
          </a>
          <a class="relative inline-flex h-12 w-full mb-4 items-center justify-center font-semibold rounded-lg bg-blue-500" href="#">
            <span class="text-black">Logout</span>
          </a>
          <p class="pl-2 text-sm">2022 &copy; Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>