Shuffle Components in Pstls library

<section class="pb-24 relative">
  <div class="absolute top-0 left-0 hidden xl:block h-full bg-yellow-100 max-w-sm w-full" style="background-image: url('pstls-assets/images/headers/shadows-color.png'); background-repeat: no-repeat; background-size: cover;"></div>
  <nav class="relative py-10" data-config-="">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between relative">
        <a class="inline-block" href="#">
          <img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="116">
        </a>
        <button class="lg:hidden navbar-burger">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#000"></path>
          </svg>
        </button>
        <div class="hidden lg:block absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
          <ul class="inline-flex">
            <li class="mr-8"><a class="inline-block font-bold hover:text-gray-900" aria-current="page" href="#">Home</a></li>
            <li class="mr-8"><a class="inline-block font-bold hover:text-gray-900" href="#">Products</a></li>
            <li class="mr-8"><a class="inline-block font-bold hover:text-gray-900" href="#">Resources</a></li>
            <li><a class="inline-block font-bold hover:text-gray-900" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="hidden lg:block ml-auto"><a class="inline-block mr-8 font-bold hover:text-gray-900" href="#">Log In</a><a class="inline-block px-8 py-3 text-white font-bold bg-black hover:bg-gray-900 transition duration-200" href="#">Sign Up</a></div>
      </div>
    </div>
  </nav>
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap justify-between">
      <div class="relative hidden lg:flex items-center top-0 left-0 -ml-32 pr-32 w-full lg:w-auto">
        <div class="absolute flex" style="transform: rotate(-90deg);"><a class="mr-14 text-xs font-bold text-black" href="#">Facebook</a><a class="mr-14 text-xs font-bold text-black" href="#">Twitter</a><a class="text-xs font-bold text-black" href="#">Instagram</a></div>
      </div>
      <div class="w-full lg:w-5/12 md:flex lg:hidden items-center mb-8">
        <ul class="max-w-lg mx-auto text-center flex justify-center md:justify-between">
          <li class="mr-6"><a class="text-xs text-black font-bold" href="#">Twitter</a></li>
          <li class="mr-6"><a class="text-xs text-black font-bold" href="#">Facebook</a></li>
          <li><a class="text-xs text-black font-bold" href="#">Instagram</a></li>
        </ul>
      </div>
      <div class="w-full lg:w-5/12 mb-6">
        <div class="flex flex-col items-center">
          <div class="mb-9">
            <img src="pstls-assets/images/headers/header-1-woman.jpg" alt="">
          </div>
          <ul class="flex justify-center items-center">
            <li class="mr-3"><a class="inline-block w-2 h-2 bg-black rounded-full" href="#"></a></li>
            <li class="mr-3"><a class="inline-block w-2 h-2 bg-gray-100 rounded-full" href="#"></a></li>
            <li class="mr-3"><a class="inline-block w-2 h-2 bg-gray-100 rounded-full" href="#"></a></li>
            <li><a class="inline-block w-2 h-2 bg-gray-100 rounded-full" href="#"></a></li>
          </ul>
        </div>
      </div>
      <div class="w-full lg:w-5/12 flex items-center">
        <div class="max-w-lg mx-auto">
          <h1 class="text-5xl lg:text-6xl font-heading mb-6">
            <span>Created for</span>
            <span class="text-indigo-200">ambitious</span>
            <span>businesses.</span>
          </h1>
          <p class="leading-8 md:max-w-md xl:max-w-sm mb-6">Pstls. Kit uses attractive colors and modern typography to make you look good, no matter what business you&rsquo;re in.</p>
          <div class="ml-auto"><a class="inline-block w-full md:w-auto text-center px-8 py-3 text-white font-bold bg-black hover:bg-gray-900 transition duration-200" href="#">Details</a></div>
        </div>
      </div>
    </div>
  </div>
  <div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-3/4 max-w-xs z-50" data-config-="">
    <div class="navbar-backdrop fixed inset-0 bg-black bg-opacity-75"></div>
    <nav class="relative flex flex-col h-full p-8 bg-white">
      <div class="flex items-center justify-between mb-12">
        <a class="items-center" href="#">
          <img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="102">
        </a>
        <button class="inline-block navbar-close focus:outline-none" type="button" aria-label="Close">
          <img src="pstls-assets/images/navigations/x2.svg" alt="">
        </button>
      </div>
      <div>
        <ul>
          <li class="py-3"><a class="inline-block font-bold hover:text-gray-900" href="#">Home</a></li>
          <li class="py-3"><a class="inline-block font-bold hover:text-gray-900" href="#">Products</a></li>
          <li class="py-3"><a class="inline-block font-bold hover:text-gray-900" href="#">Resources</a></li>
          <li class="py-3"><a class="inline-block font-bold hover:text-gray-900" href="#">Pricing</a></li>
        </ul>
      </div>
      <div class="mt-auto">
        <div><a class="block py-3 text-center font-bold" href="#">Log In</a><a class="block px-8 py-3 text-center text-white font-bold bg-black hover:bg-gray-900" href="#">Sign Up</a></div>
      </div>
    </nav>
  </div>
</section>