Shuffle Components in Boldui library

<section class="relative py-24 bg-black overflow-x-hidden">
  <img class="absolute top-0 left-1/2 transform -translate-x-1/2 object-contain" src="boldui-assets/elements/shadow-blue-pricing.svg" alt="">
  <div class="relative container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center -mx-4 mb-16">
      <div class="w-full lg:w-auto max-w-md px-4 mb-8 lg:mb-0">
        <span class="text-lg font-semibold text-blue-400">Lorem ipsum</span>
        <h2 class="mt-6 text-2xl text-white uppercase font-heading">Increase your brand&apos;s regular profit</h2>
      </div>
      <div class="w-full lg:w-auto px-4">
        <div class="flex flex-wrap items-center"><a class="inline-block w-full md:w-auto mb-4 md:mb-0 md:mr-8 py-3 px-4 font-bold text-xs text-center rounded-full bg-blue-500 hover:bg-blue-600 uppercase font-heading transform duration-200" href="#">Active demo</a><a class="inline-block w-full md:w-auto py-3 px-4 font-bold text-xs text-center text-gray-500 hover:text-gray-400 border hover:border-gray-500 rounded-full uppercase font-heading" href="#">Normal Tab</a></div>
      </div>
    </div>
    <div class="flex flex-wrap items-center">
      <div class="w-full lg:w-1/3">
        <div class="py-14 px-10 border lg:border-r-0">
          <h3 class="text-2xl text-white font-heading">Starter</h3>
          <p class="mb-10 text-lg text-gray-500 font-heading">$34.99</p>
          <ul class="mb-14">
            <li class="flex items-center mb-4">
              <svg class="mr-4" width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">Complete documentation</span>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4" width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">100GB cloud storage</span>
            </li>
            <li class="flex items-center">
              <svg class="mr-4" width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">Complete documentation</span>
            </li>
          </ul>
          <a class="inline-flex items-center py-4 text-white hover:underline" href="#">
            <span class="mr-2 text-sm font-heading">Activate demo</span>
            <svg class="text-yellow-300" width="16" height="9" viewbox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.0099 3.28373H-6.10352e-05V5.37603H12.0099V8.51449L15.9999 4.32988L12.0099 0.145264V3.28373Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-full lg:w-1/3">
        <div class="py-20 px-10 border">
          <div class="flex items-center justify-between mb-10">
            <div>
              <h3 class="text-5xl text-yellow-400 font-heading">Pro</h3>
              <p class="text-lg text-gray-500 font-heading">$65.99</p>
            </div>
            <div class="relative w-1/2">
              <img class="absolute top-1/2 left-1/2 h-16 md:h-32 w-16 md:w-32 transform -translate-y-1/2 -translate-x-1/2" src="boldui-assets/elements/best-choice-text.svg" alt="">
            </div>
          </div>
          <ul class="mb-14">
            <li class="flex items-center mb-4">
              <svg class="mr-4" width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">Complete documentation</span>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4" width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">100GB cloud storage</span>
            </li>
            <li class="flex items-center">
              <svg class="mr-4" width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">Complete documentation</span>
            </li>
          </ul>
          <a class="inline-flex items-center justify-center w-full py-4 md:px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
            <svg class="text-black 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="currentColor"></path>
            </svg>
            <span class="text-sm font-heading">Activate demo</span>
          </a>
        </div>
      </div>
      <div class="w-full lg:w-1/3">
        <div class="py-14 px-10 border lg:border-l-0">
          <h3 class="text-2xl text-white font-heading">Premium</h3>
          <p class="mb-10 text-lg text-gray-500 font-heading">$99.99</p>
          <ul class="mb-14">
            <li class="flex items-center mb-4">
              <svg class="mr-4" width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">Complete documentation</span>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4" width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">100GB cloud storage</span>
            </li>
            <li class="flex items-center">
              <svg class="mr-4" width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">Complete documentation</span>
            </li>
          </ul>
          <a class="inline-flex items-center py-4 text-white hover:underline" href="#">
            <span class="mr-2 text-sm font-heading">Activate demo</span>
            <svg class="text-yellow-300" width="16" height="9" viewbox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.0099 3.28373H-6.10352e-05V5.37603H12.0099V8.51449L15.9999 4.32988L12.0099 0.145264V3.28373Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>