Tailwind Components in Shuffle-Ux library

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto mb-12 text-center">
      <span class="text-sm text-gray-200 uppercase">Lorem Ipsum</span>
      <h2 class="mt-2 mb-4 text-4xl lg:text-5xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="mb-6 text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      <a class="mr-6 text-lg text-gray-900 pb-2 border-b-4 border-gray-500" href="#">Monthly</a><a class="text-lg text-gray-700 hover:text-gray-500 pb-2" href="#">Yearly</a>
    </div>
    <div class="flex flex-wrap items-center -mx-4 -mb-6 lg:mb-0">
      <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
        <div class="p-12 bg-gray-50 rounded lg:text-center">
          <h3 class="text-2xl font-bold text-gray-500">Starter</h3>
          <span class="inline-block mb-6 text-6xl font-bold font-heading">$34,99</span>
          <ul class="mb-6 text-left text-lg">
            <li class="mb-2 flex items-center">
              <svg class="mr-2 w-6 h-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p>Complete documentation</p>
            </li>
            <li class="mb-2 flex items-center">
              <svg class="mr-2 w-6 h-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p>Working materials in Figma</p>
            </li>
            <li class="mb-2 flex items-center">
              <svg class="mr-2 w-6 h-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p>100GB cloud storage</p>
            </li>
            <li class="mb-2 flex items-center">
              <svg class="mr-2 w-6 h-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p>500 team members</p>
            </li>
          </ul>
          <a class="block py-2 w-full text-center text-gray-50 font-semibold bg-gray-500 hover:bg-gray-600 rounded" href="#">Action</a>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
        <div class="p-12 bg-gray-500 rounded lg:text-center">
          <h3 class="text-2xl font-bold text-gray-50">Pro</h3>
          <span class="inline-block mb-6 text-6xl font-bold text-white">$65,99</span>
          <ul class="mb-6 text-left text-lg">
            <li class="mb-2 flex items-center">
              <svg class="mr-2 w-6 h-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="text-lg text-white">Complete documentation</p>
            </li>
            <li class="mb-2 flex items-center">
              <svg class="mr-2 w-6 h-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="text-lg text-white">Working materials in Figma</p>
            </li>
            <li class="mb-2 flex items-center">
              <svg class="mr-2 w-6 h-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="text-lg text-white">100GB cloud storage</p>
            </li>
            <li class="mb-2 flex items-center">
              <svg class="mr-2 w-6 h-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="text-lg text-white">500 team members</p>
            </li>
            <li class="mb-2 flex items-center">
              <svg class="mr-2 w-6 h-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="text-lg text-white">Premium support</p>
            </li>
          </ul>
          <a class="block py-2 w-full text-center text-gray-800 font-semibold bg-white hover:bg-gray-50 rounded" href="#">Action</a>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4">
        <div class="p-12 bg-gray-50 rounded lg:text-center">
          <h3 class="text-2xl font-bold text-gray-500">Premium</h3>
          <span class="inline-block mb-6 text-6xl font-bold font-heading">$99,99</span>
          <ul class="mb-6 text-left text-lg">
            <li class="mb-2 flex items-center">
              <svg class="mr-2 w-6 h-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p>Complete documentation</p>
            </li>
            <li class="mb-2 flex items-center">
              <svg class="mr-2 w-6 h-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p>Working materials in Figma</p>
            </li>
            <li class="mb-2 flex items-center">
              <svg class="mr-2 w-6 h-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p>100GB cloud storage</p>
            </li>
            <li class="mb-2 flex items-center">
              <svg class="mr-2 w-6 h-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p>500 team members</p>
            </li>
          </ul>
          <a class="block py-2 w-full text-center text-gray-50 font-semibold bg-gray-500 hover:bg-gray-600 rounded" href="#">Action</a>
        </div>
      </div>
    </div>
  </div>
</section>