Shuffle Components in Acros library

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap justify-between items-center -mx-4 mb-10">
      <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
        <span class="text-sm font-semibold uppercase">Pricing</span>
        <h2 class="max-w-xl font-heading text-3xl sm:text-4xl">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      </div>
      <div class="w-full lg:w-auto px-4">
        <div class="inline-flex items-center p-2 bg-gray-100 rounded"><a class="inline-block px-8 pt-2 pb-3 leading-6 font-heading font-medium text-green-500 bg-white rounded-sm" href="#">Monthly</a><a class="inline-block px-8 pt-2 pb-3 leading-6 font-heading font-medium text-gray-900 hover:text-gray-700" href="#">Yearly</a></div>
      </div>
    </div>
    <div class="max-w-md lg:max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-full lg:w-1/3">
          <div class="p-8 bg-white rounded-md">
            <div class="text-center mb-20">
              <span class="font-heading font-medium text-lg">Starter</span>
              <div class="flex items-start justify-center mt-2">
                <span class="font-heading font-medium text-lg">$</span>
                <span class="font-heading font-medium text-3xl leading-10">9,99</span>
              </div>
            </div>
            <ul class="mb-8">
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">Complete documentation</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">Working materials in Figma</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">100GB cloud storage</span>
              </li>
              <li class="flex items-center">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">500 team members</span>
              </li>
            </ul>
            <a class="block py-4 px-6 text-center font-heading font-medium text-base text-green-500 hover:text-white border border-green-500 hover:bg-green-500 rounded-sm transition duration-200" href="#">Get started</a>
          </div>
        </div>
        <div class="w-full lg:w-1/3">
          <div class="relative py-12 px-8 bg-gray-900 rounded-md">
            <img class="absolute top-0 left-0 -ml-1 -mt-1" src="acros-assets/elements/bestseller.svg" alt="">
            <div class="text-center mb-20">
              <span class="font-heading font-medium text-white text-lg">Pro</span>
              <div class="flex items-start justify-center mt-2">
                <span class="font-heading font-medium text-white text-lg">$</span>
                <span class="font-heading font-medium text-white text-3xl leading-10">14,99</span>
              </div>
            </div>
            <ul class="mb-8">
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-white text-sm">Complete documentation</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-white text-sm">Working materials in Figma</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-white text-sm">100GB cloud storage</span>
              </li>
              <li class="flex items-center">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-white text-sm">500 team members</span>
              </li>
            </ul>
            <a class="block py-4 px-6 text-center font-heading font-medium text-base bg-white hover:bg-gray-100 border border-white hover:border-gray-100 rounded-sm transition duration-200" href="#">Get started</a>
          </div>
        </div>
        <div class="w-full lg:w-1/3">
          <div class="p-8 bg-white rounded-md">
            <div class="text-center mb-20">
              <span class="font-heading font-medium text-lg">Premium</span>
              <div class="flex items-start justify-center mt-2">
                <span class="font-heading font-medium text-lg">$</span>
                <span class="font-heading font-medium text-3xl leading-10">19,99</span>
              </div>
            </div>
            <ul class="mb-8">
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">Complete documentation</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">Working materials in Figma</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">100GB cloud storage</span>
              </li>
              <li class="flex items-center">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">500 team members</span>
              </li>
            </ul>
            <a class="block py-4 px-6 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="#">Get started</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>