Shuffle Components in Acros library

<section class="pb-12 lg:pb-32">
  <nav class="py-4 bg-white">
    <div class="container mx-auto px-4">
      <div class="relative flex items-center justify-between">
        <div class="w-auto">
          <a class="inline-block" href="#">
            <img src="acros-assets/logo/logo-acros-black.svg" alt="">
          </a>
        </div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden lg:block">
          <ul class="flex items-center">
            <li class="font-heading mr-12"><a class="hover:text-black" href="#">About</a></li>
            <li class="font-heading mr-12"><a class="hover:text-black" href="#">Company</a></li>
            <li class="font-heading mr-12"><a class="hover:text-black" href="#">Services</a></li>
            <li class="font-heading mr-12"><a class="hover:text-black" href="#">Testimonials</a></li>
          </ul>
        </div>
        <div class="w-auto hidden lg:block"><a class="inline-block py-4 px-8 font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Contact</a></div>
        <div class="w-auto lg:hidden">
          <a class="navbar-burger inline-flex w-14 h-14 justify-center items-center bg-gray-500 hover:bg-gray-600 rounded-full" href="#">
            <svg width="20" height="10" viewbox="0 0 20 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 9H1M19 1H1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </nav>
  <div class="mb-40 md:mb-12 py-18 bg-cover bg-no-repeat bg-center" style="background-image: url('acros-assets/images/headers/header-1-bg.jpg');">
    <div class="relative container px-4 mx-auto">
      <div class="w-full xl:w-1/2 px-4 mb-24 xl:mb-0">
        <div class="max-w-md md:max-w-lg mx-auto">
          <div class="text-sm mb-2 font-semibold text-white uppercase">
            <span>Develop Your</span>
            <span class="text-green-500">Skills</span>
          </div>
          <h1 class="font-heading text-4xl md:text-5xl text-white mb-6">Take care of your performance every day</h1>
          <p class="text-lg leading-8 text-white mb-10">Take care to develop resources continually and integrity them with previous projects.</p>
          <div class="sm:flex items-center"><a class="inline-block w-full sm:w-auto py-4 px-6 mb-4 sm:mb-0 sm:mr-4 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Track your performance</a><a class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-white hover:text-green-500 border border-white hover:border-green-500 rounded-sm transition duration-150" href="#">Learn more</a></div>
        </div>
      </div>
      <img class="xl:absolute top-0 right-0 block mx-auto -mb-52 xl:-mb-0" src="acros-assets/images/headers/header-1-woman.png" alt="">
    </div>
  </div>
  <div class="relative container px-4 mx-auto">
    <a class="inline-block text-gray-900" href="#">
      <svg width="26" height="30" viewbox="0 0 26 30" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M13 1V29M13 29L25 17M13 29L1 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </a>
  </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-7 pb-8 bg-white h-full overflow-y-auto">
      <div class="flex flex-col px-6 h-full">
        <a class="inline-block ml-4 mb-7" href="#">
          <img src="acros-assets/logo/logo-acros-black.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li><a class="font-heading block text-base font-medium py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Home</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">About</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Company</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Services</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Testimonials</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <a class="block w-full py-4 px-4 mb-4 text-center font-heading font-medium text-base hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-200" href="#">Log in</a><a class="block w-full py-4 px-4 mb-8 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Sign up</a>
          <p class="pl-2 text-sm">2022 &copy; Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>