Shuffle Components in Boldui library

<section class="relative bg-black overflow-hidden">
  <div class="relative w-2/3 ml-auto">
    <div class="absolute top-0 left-0 mt-20 lg:-ml-0 rounded-full h-20 lg:h-96 xl:h-160 w-80 md:w-96 lg:w-160">
      <img class="object-contain transform scale-200" src="boldui-assets/elements/shadow-blue-full.svg" alt="">
    </div>
    <div class="absolute top-1/2 right-0 -mr-64 mt-40 lg:mt-20 rounded-full h-20 lg:h-96 xl:h-160 w-80 md:w-96 lg:w-160">
      <img class="object-contain transform scale-200" src="boldui-assets/elements/shadow-light-7.svg" alt="">
    </div>
    <div class="absolute top-0 right-0 -mt-52 lg:-mt-0 -mr-64">
      <div class="transform rotate-45 clip-path md:-mt-20">
        <img class="mt-40 lg:mt-0 transform -rotate-45 h-full" src="boldui-assets/images/photo-women.png" alt="">
      </div>
    </div>
  </div>
  <nav class="relative flex px-16 justify-between bg-transparent border-b">
    <div class="pr-14 py-8 lg:border-r">
      <a class="inline-block text-xl text-white font-medium font-heading" href="#">
        <img class="h-8" width="auto" src="boldui-assets/logo/logo-boldui-light.svg" alt="">
      </a>
    </div>
    <button class="navbar-burger lg:hidden self-center">
      <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="6" width="24" height="2" fill="white"></rect><rect y="11" width="24" height="2" fill="white"></rect><rect y="16" width="24" height="2" fill="white"></rect></svg>
    </button>
    <div class="hidden lg:flex items-center pl-16 py-8 border-l">
      <div class="flex items-center">
        <a class="inline-block text-sm text-white hover:underline font-heading" href="#">Sign In</a>
        <span class="mx-2 text-white">/</span>
        <a class="inline-block text-sm text-white hover:underline font-heading" href="#">Support</a>
      </div>
    </div>
  </nav>
  <div class="relative container mx-auto px-4">
    <div class="flex py-24 lg:pb-52">
      <div class="w-full md:w-1/2 lg:mt-16">
        <div class="max-w-sm">
          <h2 class="mb-10 text-2xl sm:text-3xl md:text-5xl text-white uppercase font-heading">Take care of your performance every day</h2>
          <a class="inline-flex items-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
            <svg class="mr-3" width="16" height="9" viewbox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="black"></path>
            </svg>
            <span class="text-sm uppercase font-heading">Start for free</span>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="relative border-t pb-8 lg:pb-6">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap py-10 -mb-6 lg:-mb-4 -mx-4">
        <div class="w-1/2 lg:w-1/5 py-6 lg:py-4 px-4">
          <img class="mx-auto h-8" src="boldui-assets/brands/slack.svg" alt="">
        </div>
        <div class="w-1/2 lg:w-1/5 py-6 lg:py-4 px-4">
          <img class="mx-auto h-8" src="boldui-assets/brands/dropbox.svg" alt="">
        </div>
        <div class="w-1/2 lg:w-1/5 py-6 lg:py-4 px-4">
          <img class="mx-auto h-8" src="boldui-assets/brands/spotify.svg" alt="">
        </div>
        <div class="w-1/2 lg:w-1/5 py-6 lg:py-4 px-4">
          <img class="mx-auto h-8" src="boldui-assets/brands/stripe.svg" alt="">
        </div>
        <div class="w-1/2 lg:w-1/5 py-6 lg:py-4 px-4">
          <img class="mx-auto h-8" src="boldui-assets/brands/netflix.svg" alt="">
        </div>
      </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-25"></div>
    <nav class="relative flex flex-col py-8 px-10 w-full h-full bg-black border-r overflow-y-auto">
      <a class="inline-block text-xl text-white font-medium font-heading mb-16 md:mb-32" href="#">
        <img class="h-8" width="auto" src="boldui-assets/logo/logo-boldui-light.svg" alt="">
      </a>
      <ul class="mb-32">
        <li class="mb-10">
          <a class="flex items-center" href="#">
            <span class="mr-3 text-lg text-white">About</span>
            <svg width="16" height="9" viewbox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.48047H0V5.57278H12.01V8.71124L16 4.52663L12.01 0.34201V3.48047Z" fill="#FFEC3E"></path>
            </svg>
          </a>
        </li>
        <li class="mb-10">
          <a class="flex items-center" href="#">
            <span class="mr-3 text-lg text-white">Company</span>
            <svg width="16" height="9" viewbox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.48047H0V5.57278H12.01V8.71124L16 4.52663L12.01 0.34201V3.48047Z" fill="#FFEC3E"></path>
            </svg>
          </a>
        </li>
        <li class="mb-10">
          <a class="flex items-center" href="#">
            <span class="mr-3 text-lg text-white">Services</span>
            <svg width="16" height="9" viewbox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.48047H0V5.57278H12.01V8.71124L16 4.52663L12.01 0.34201V3.48047Z" fill="#FFEC3E"></path>
            </svg>
          </a>
        </li>
        <li>
          <a class="flex items-center" href="#">
            <span class="mr-3 text-lg text-white">Contact</span>
            <svg width="16" height="9" viewbox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.48047H0V5.57278H12.01V8.71124L16 4.52663L12.01 0.34201V3.48047Z" fill="#FFEC3E"></path>
            </svg>
          </a>
        </li>
      </ul>
      <a class="flex mb-8 items-center justify-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
        <svg class="mr-3" width="16" height="9" viewbox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="black"></path>
        </svg>
        <span class="text-sm font-medium uppercase tracking-wider">Sign Up</span>
      </a>
      <a class="flex mb-10 items-center text-white hover:underline" href="#">
        <span class="mr-2 text-sm">Log In</span>
        <svg width="16" height="10" viewbox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.01 3.95383H0V6.04614H12.01V9.1846L16 4.99998L12.01 0.815369V3.95383Z" fill="#FFEC3E"></path>
        </svg>
      </a>
      <p class="text-sm text-gray-500">All rights reserved &copy; BoldUI 2021</p>
    </nav>
  </div>
</section>