Tailwind Pricing Components

<section class="pt-20 pb-24 2xl:py-40 bg-gray-800">
  <div class="container mx-auto px-4">
    <div class="mb-16 md:mb-24 text-center">
      <h2 class="mb-8 md:mb-14 text-5xl lg:text-6xl 2xl:text-7xl text-white font-bold font-heading">Choose a plan</h2>
      <p class="text-lg text-gray-200">The quick brown fox jumps over the lazy dog.</p>
    </div>
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-3">
        <div class="w-full lg:w-1/3 px-3 mb-8 lg:mb-0">
          <div class="px-12 py-16 bg-gray-500 rounded-3xl">
            <div class="pb-8 mb-14 border-b border-gray-400">
              <div class="flex justify-between items-center px-3">
                <h3 class="text-4xl text-white font-bold font-heading">Free</h3>
                <p class="text-lg text-white font-bold">$0,00</p>
              </div>
            </div>
            <ul class="text-lg text-white mb-16">
              <li class="flex items-center mb-8">
                <span class="mr-6">
                  <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>Complete files</span>
              </li>
              <li class="flex items-center mb-8">
                <span class="mr-6">
                  <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>10GB cloud storage</span>
              </li>
              <li class="flex items-center">
                <span class="mr-6">
                  <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>5 team members</span>
              </li>
            </ul>
            <div class="text-center"><a class="inline-block px-10 py-4 border border-gray-200 hover:border-gray-100 rounded-full font-bold text-white" href="#">Try free</a></div>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-3 mb-8 lg:mb-0">
          <div class="px-12 py-16 bg-blue-500 rounded-3xl">
            <div class="pb-8 mb-14 border-b border-blueGray-300">
              <div class="flex justify-between items-center px-3">
                <h3 class="text-4xl text-white font-bold font-heading">Team</h3>
                <p class="text-lg text-white font-bold">$9,99</p>
              </div>
            </div>
            <ul class="text-lg text-white mb-16">
              <li class="flex items-center mb-8">
                <span class="mr-6">
                  <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>Complete files</span>
              </li>
              <li class="flex items-center mb-8">
                <span class="mr-6">
                  <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>100GB cloud storage</span>
              </li>
              <li class="flex items-center mb-8">
                <span class="mr-6">
                  <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>20 team members</span>
              </li>
              <li class="flex items-center mb-8">
                <span class="mr-6">
                  <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>Unlimited anonymous board editors</span>
              </li>
              <li class="flex items-center">
                <span class="mr-6">
                  <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>10GB cloud storage</span>
              </li>
            </ul>
            <div class="text-center"><a class="inline-block px-10 py-4 border border-blueGray-300 hover:border-blueGray-100 rounded-full font-bold text-white" href="#">Buy now</a></div>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-3">
          <div class="px-12 py-16 bg-gray-500 rounded-3xl">
            <div class="pb-8 mb-14 border-b border-gray-400">
              <div class="flex justify-between items-center px-3">
                <h3 class="text-4xl text-white font-bold font-heading">Premium</h3>
                <p class="text-lg text-white font-bold">$29,99</p>
              </div>
            </div>
            <ul class="text-lg text-white mb-16">
              <li class="flex items-center mb-8">
                <span class="mr-6">
                  <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>Complete files</span>
              </li>
              <li class="flex items-center mb-8">
                <span class="mr-6">
                  <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>20GB cloud storage</span>
              </li>
              <li class="flex items-center">
                <span class="mr-6">
                  <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>200+ team members</span>
              </li>
            </ul>
            <div class="text-center"><a class="inline-block px-10 py-4 border border-gray-200 hover:border-gray-100 rounded-full font-bold text-white" href="#">Buy now</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>