Shuffle Components in Boldui library

<section class="py-20 bg-black overflow-hidden">
  <div class="relative container mx-auto px-4">
    <img class="absolute top-1/2 right-0 transform -translate-y-1/2" src="boldui-assets/elements/shadow-ellipse.svg" alt="">
    <div class="max-w-xl mx-auto mb-8 md:mb-14 text-center">
      <h2 class="mb-6 text-3xl text-white uppercase font-heading">Increase your brand&apos;s regular profit</h2>
      <p class="text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="flex flex-wrap -mx-4 mb-20">
      <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-0">
        <div class="flex flex-wrap items-center">
          <div class="relative flex items-center justify-center h-40 w-1/3">
            <img class="absolute top-0 left-0 w-full h-full" src="boldui-assets/elements/ellipse.svg" alt="">
            <span class="text-yellow-300">1</span>
          </div>
          <div class="w-full md:w-2/3">
            <h3 class="mb-4 text-2xl text-white font-heading">Spectacular team plan</h3>
            <p class="text-gray-500">Fairly assigning daily tasks to your employees. Take a big step forward in growing your business.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-0">
        <div class="flex flex-wrap items-center">
          <div class="relative flex items-center justify-center h-40 w-1/3">
            <img class="absolute top-0 left-0 w-full h-full" src="boldui-assets/elements/ellipse.svg" alt="">
            <span class="text-yellow-300">2</span>
          </div>
          <div class="w-full md:w-2/3">
            <h3 class="mb-4 text-2xl text-white font-heading">Change of access</h3>
            <p class="text-gray-500">Fairly assigning daily tasks to your employees. Take a big step forward in growing your business.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4 mb-10 md:mb-0">
        <div class="flex flex-wrap items-center">
          <div class="relative flex items-center justify-center h-40 w-1/3">
            <img class="absolute top-0 left-0 w-full h-full" src="boldui-assets/elements/ellipse.svg" alt="">
            <span class="text-yellow-300">3</span>
          </div>
          <div class="w-full md:w-2/3">
            <h3 class="mb-4 text-2xl text-white font-heading">List of regular users</h3>
            <p class="text-gray-500">Fairly assigning daily tasks to your employees. Take a big step forward in growing your business.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="flex flex-wrap items-center">
          <div class="relative flex items-center justify-center h-40 w-1/3">
            <img class="absolute top-0 left-0 w-full h-full" src="boldui-assets/elements/ellipse.svg" alt="">
            <span class="text-yellow-300">4</span>
          </div>
          <div class="w-full md:w-2/3">
            <h3 class="mb-4 text-2xl text-white font-heading">Frequent authentication</h3>
            <p class="text-gray-500">Fairly assigning daily tasks to your employees. Take a big step forward in growing your business.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center">
      <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="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>
</section>