Pricing Components in Casper library

Pricing from Casper

<section class="relative py-12 sm:pt-24 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="absolute top-0 left-0 -mt-40 -ml-52 w-186 h-186 bg-gradient-to-t from-violet-700 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
    <div class="relative max-w-2xl mx-auto mb-14 text-center">
      <span class="inline-flex items-center px-3.5 h-7 mb-4 text-xs font-medium text-white leading-6 bg-gradient-tag rounded-full">PRICING PLAN</span>
      <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl xl:text-7xl font-medium text-white tracking-tight mb-4">Choose Your Plan</h2>
      <p class="max-w-md mx-auto text-lg leading-snug tracking-tight text-gray-500">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
    </div>
    <div class="relative max-w-md lg:max-w-8xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
          <div class="rounded-3xl overflow-hidden">
            <img class="block w-full h-44 object-cover" src="casper-assets/pricing/pricing-top-1.png" alt="">
            <div class="bg-white p-10">
              <span class="block mb-10 text-4xl font-semibold text-gray-900">$50</span>
              <span class="block mb-2 text-2xl font-medium text-gray-900">Beginner</span>
              <p class="max-w-xs text-sm text-gray-600 mb-8">Simply dummy text of the printing and typesetting industry.</p>
              <div>
                <span class="block mb-4 text-lg font-medium text-gray-900 tracking-tight">What’s included:</span>
                <ul class="mb-8">
                  <li class="flex items-center mb-4">
                    <div class="flex mr-2 items-center justify-center w-5 h-5 rounded-full bg-green-600">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="black"></path>
                      </svg>
                    </div>
                    <span class="text-base text-gray-900 tracking-tight">Unlimited Upload Files</span>
                  </li>
                  <li class="flex items-center mb-4">
                    <div class="flex mr-2 items-center justify-center w-5 h-5 rounded-full bg-green-600">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="black"></path>
                      </svg>
                    </div>
                    <span class="text-base text-gray-900 tracking-tight">Advanced Statistic With</span>
                  </li>
                  <li class="flex items-center mb-4">
                    <div class="flex mr-2 items-center justify-center w-5 h-5 rounded-full bg-red-600">
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 3L3 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M3 3L9 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <span class="text-base text-gray-900 tracking-tight">Powered by state-of-the-art AI</span>
                  </li>
                  <li class="flex items-center">
                    <div class="flex mr-2 items-center justify-center w-5 h-5 rounded-full bg-red-600">
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 3L3 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M3 3L9 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <span class="text-base text-gray-900 tracking-tight">Casper will adapts to each user</span>
                  </li>
                </ul>
                <a class="group inline-flex w-full md:w-auto h-14 px-7 items-center justify-center text-base font-medium text-black hover:text-white bg-violet-500 hover:bg-black transition duration-200 rounded-full" href="#">
                  <span class="mr-2">CHOOSE PLAN</span>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
          <div class="rounded-3xl overflow-hidden">
            <img class="block w-full h-44 object-cover" src="casper-assets/pricing/pricing-top-2.png" alt="">
            <div class="bg-white p-10">
              <span class="block mb-10 text-4xl font-semibold text-gray-900">$100</span>
              <span class="block mb-2 text-2xl font-medium text-gray-900">Intermediate</span>
              <p class="max-w-xs text-sm text-gray-600 mb-8">Simply dummy text of the printing and typesetting industry.</p>
              <div>
                <span class="block mb-4 text-lg font-medium text-gray-900 tracking-tight">What’s included:</span>
                <ul class="mb-8">
                  <li class="flex items-center mb-4">
                    <div class="flex mr-2 items-center justify-center w-5 h-5 rounded-full bg-green-600">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="black"></path>
                      </svg>
                    </div>
                    <span class="text-base text-gray-900 tracking-tight">Unlimited Upload Files</span>
                  </li>
                  <li class="flex items-center mb-4">
                    <div class="flex mr-2 items-center justify-center w-5 h-5 rounded-full bg-green-600">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="black"></path>
                      </svg>
                    </div>
                    <span class="text-base text-gray-900 tracking-tight">Advanced Statistic With</span>
                  </li>
                  <li class="flex items-center mb-4">
                    <div class="flex mr-2 items-center justify-center w-5 h-5 rounded-full bg-green-600">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="black"></path>
                      </svg>
                    </div>
                    <span class="text-base text-gray-900 tracking-tight">Powered by state-of-the-art AI</span>
                  </li>
                  <li class="flex items-center">
                    <div class="flex mr-2 items-center justify-center w-5 h-5 rounded-full bg-red-600">
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 3L3 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M3 3L9 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <span class="text-base text-gray-900 tracking-tight">Casper will adapts to each user</span>
                  </li>
                </ul>
                <a class="group inline-flex w-full md:w-auto h-14 px-7 items-center justify-center text-base font-medium text-black hover:text-white bg-violet-500 hover:bg-black transition duration-200 rounded-full" href="#">
                  <span class="mr-2">CHOOSE PLAN</span>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <div class="rounded-3xl overflow-hidden">
            <img class="block w-full h-44 object-cover" src="casper-assets/pricing/pricing-top-3.png" alt="">
            <div class="bg-white p-10">
              <span class="block mb-10 text-4xl font-semibold text-gray-900">$150</span>
              <span class="block mb-2 text-2xl font-medium text-gray-900">Advanced</span>
              <p class="max-w-xs text-sm text-gray-600 mb-8">Simply dummy text of the printing and typesetting industry.</p>
              <div>
                <span class="block mb-4 text-lg font-medium text-gray-900 tracking-tight">What’s included:</span>
                <ul class="mb-8">
                  <li class="flex items-center mb-4">
                    <div class="flex mr-2 items-center justify-center w-5 h-5 rounded-full bg-green-600">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="black"></path>
                      </svg>
                    </div>
                    <span class="text-base text-gray-900 tracking-tight">Unlimited Upload Files</span>
                  </li>
                  <li class="flex items-center mb-4">
                    <div class="flex mr-2 items-center justify-center w-5 h-5 rounded-full bg-green-600">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="black"></path>
                      </svg>
                    </div>
                    <span class="text-base text-gray-900 tracking-tight">Advanced Statistic With</span>
                  </li>
                  <li class="flex items-center mb-4">
                    <div class="flex mr-2 items-center justify-center w-5 h-5 rounded-full bg-green-600">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="black"></path>
                      </svg>
                    </div>
                    <span class="text-base text-gray-900 tracking-tight">Powered by state-of-the-art AI</span>
                  </li>
                  <li class="flex items-center">
                    <div class="flex mr-2 items-center justify-center w-5 h-5 rounded-full bg-green-600">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="black"></path>
                      </svg>
                    </div>
                    <span class="text-base text-gray-900 tracking-tight">Casper will adapts to each user</span>
                  </li>
                </ul>
                <a class="group inline-flex w-full md:w-auto h-14 px-7 items-center justify-center text-base font-medium text-black hover:text-white bg-violet-500 hover:bg-black transition duration-200 rounded-full" href="#">
                  <span class="mr-2">CHOOSE PLAN</span>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing from Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0" src="casper-assets/blur/blur-left-center-violet.svg" alt=""/><img class="position-absolute top-0 end-0" src="casper-assets/blur/blur-circle-blue.svg" alt=""/> <div class="container position-relative"> <div class="mw-2xl mx-auto mb-20 text-center"><span class="badge text-uppercase mb-6" style="background: linear-gradient(158deg, #826FFF 1.14%, #511CFF 51.87%, #00D1FF 104.76%);">Pricing Plan</span> <h2 class="font-heading fw-medium text-white mb-4">Choose Your Plan</h2> <p class="mw-md mx-auto fs-6 text-light-light mb-8">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p> </div> <div class="mw-sm mx-auto mw-lg-none"> <div class="row"> <div class="col-lg-4 mb-8 mb-lg-0"> <div class="rounded overflow-hidden"><img class="img-fluid d-block w-100" src="casper-assets/pricing/pricing-top-1.png" alt=""/> <div class="p-10 bg-white"><span class="d-block mb-10 display-2 fw-semibold">$50</span> <h5 class="d-block mb-1 display-4 fw-medium">Beginner</h5> <p class="small mb-8">Simply dummy text of the printing and typesetting industry.</p> <h6 class="mb-5 fw-medium">What’s included:</h6> <ul class="list-unstyled mb-8"> <li class="mb-4"><span class="d-inline-block flex-shrink-0"> <svg width="18" height="18" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C19.9936 4.47982 15.5202 0.00642897 10 0Z" fill="#25CA8E"></path> <path d="M14.4732 6.80667C14.4112 6.74418 14.3375 6.69458 14.2563 6.66074C14.175 6.62689 14.0879 6.60947 13.9999 6.60947C13.9119 6.60947 13.8247 6.62689 13.7435 6.66074C13.6623 6.69458 13.5885 6.74418 13.5266 6.80667L8.55989 11.78L6.47322 9.68667C6.40887 9.62451 6.33291 9.57563 6.24967 9.54283C6.16644 9.51003 6.07755 9.49394 5.9881 9.49549C5.89865 9.49703 5.81037 9.51619 5.72832 9.55185C5.64627 9.58751 5.57204 9.63898 5.50989 9.70333C5.44773 9.76768 5.39885 9.84364 5.36605 9.92688C5.33324 10.0101 5.31716 10.099 5.31871 10.1885C5.32025 10.2779 5.3394 10.3662 5.37507 10.4482C5.41073 10.5303 5.4622 10.6045 5.52655 10.6667L8.08655 13.2267C8.14853 13.2892 8.22226 13.3387 8.3035 13.3726C8.38474 13.4064 8.47188 13.4239 8.55989 13.4239C8.64789 13.4239 8.73503 13.4064 8.81627 13.3726C8.89751 13.3387 8.97124 13.2892 9.03322 13.2267L14.4732 7.78667C14.5409 7.72424 14.5949 7.64847 14.6318 7.56414C14.6688 7.4798 14.6878 7.38873 14.6878 7.29667C14.6878 7.2046 14.6688 7.11353 14.6318 7.02919C14.5949 6.94486 14.5409 6.86909 14.4732 6.80667Z" fill="black"></path> </svg></span><span class="ms-1">Unlimited Upload Files</span></li> <li class="mb-4"><span class="d-inline-block flex-shrink-0"> <svg width="18" height="18" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C19.9936 4.47982 15.5202 0.00642897 10 0Z" fill="#25CA8E"></path> <path d="M14.4732 6.80667C14.4112 6.74418 14.3375 6.69458 14.2563 6.66074C14.175 6.62689 14.0879 6.60947 13.9999 6.60947C13.9119 6.60947 13.8247 6.62689 13.7435 6.66074C13.6623 6.69458 13.5885 6.74418 13.5266 6.80667L8.55989 11.78L6.47322 9.68667C6.40887 9.62451 6.33291 9.57563 6.24967 9.54283C6.16644 9.51003 6.07755 9.49394 5.9881 9.49549C5.89865 9.49703 5.81037 9.51619 5.72832 9.55185C5.64627 9.58751 5.57204 9.63898 5.50989 9.70333C5.44773 9.76768 5.39885 9.84364 5.36605 9.92688C5.33324 10.0101 5.31716 10.099 5.31871 10.1885C5.32025 10.2779 5.3394 10.3662 5.37507 10.4482C5.41073 10.5303 5.4622 10.6045 5.52655 10.6667L8.08655 13.2267C8.14853 13.2892 8.22226 13.3387 8.3035 13.3726C8.38474 13.4064 8.47188 13.4239 8.55989 13.4239C8.64789 13.4239 8.73503 13.4064 8.81627 13.3726C8.89751 13.3387 8.97124 13.2892 9.03322 13.2267L14.4732 7.78667C14.5409 7.72424 14.5949 7.64847 14.6318 7.56414C14.6688 7.4798 14.6878 7.38873 14.6878 7.29667C14.6878 7.2046 14.6688 7.11353 14.6318 7.02919C14.5949 6.94486 14.5409 6.86909 14.4732 6.80667Z" fill="black"></path> </svg></span><span class="ms-1">Advanced Statistic With</span></li> <li class="mb-4"><span class="d-inline-block flex-shrink-0"> <svg width="18" height="18" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="10" cy="10" r="10" fill="#E25454"></circle> <path d="M13 7L7 13" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M7 7L13 13" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg></span><span class="ms-1">Powered by state-of-the-art AI</span></li> <li><span class="d-inline-block flex-shrink-0"> <svg width="18" height="18" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="10" cy="10" r="10" fill="#E25454"></circle> <path d="M13 7L7 13" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M7 7L13 13" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg></span><span class="ms-1">Casper will adapts to each user</span></li> </ul><a class="btn btn-primary text-black" href="#"><span class="me-2">CHOOSE PLAN</span> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path> </svg></a> </div> </div> </div> <div class="col-lg-4 mb-8 mb-lg-0"> <div class="rounded overflow-hidden"><img class="img-fluid d-block w-100" src="casper-assets/pricing/pricing-top-2.png" alt=""/> <div class="p-10 bg-white"><span class="d-block mb-10 display-2 fw-semibold">$100</span> <h5 class="d-block mb-1 display-4 fw-medium">Intermediate</h5> <p class="small mb-8">Simply dummy text of the printing and typesetting industry.</p> <h6 class="mb-5 fw-medium">What’s included:</h6> <ul class="list-unstyled mb-8"> <li class="mb-4"><span class="d-inline-block flex-shrink-0"> <svg width="18" height="18" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C19.9936 4.47982 15.5202 0.00642897 10 0Z" fill="#25CA8E"></path> <path d="M14.4732 6.80667C14.4112 6.74418 14.3375 6.69458 14.2563 6.66074C14.175 6.62689 14.0879 6.60947 13.9999 6.60947C13.9119 6.60947 13.8247 6.62689 13.7435 6.66074C13.6623 6.69458 13.5885 6.74418 13.5266 6.80667L8.55989 11.78L6.47322 9.68667C6.40887 9.62451 6.33291 9.57563 6.24967 9.54283C6.16644 9.51003 6.07755 9.49394 5.9881 9.49549C5.89865 9.49703 5.81037 9.51619 5.72832 9.55185C5.64627 9.58751 5.57204 9.63898 5.50989 9.70333C5.44773 9.76768 5.39885 9.84364 5.36605 9.92688C5.33324 10.0101 5.31716 10.099 5.31871 10.1885C5.32025 10.2779 5.3394 10.3662 5.37507 10.4482C5.41073 10.5303 5.4622 10.6045 5.52655 10.6667L8.08655 13.2267C8.14853 13.2892 8.22226 13.3387 8.3035 13.3726C8.38474 13.4064 8.47188 13.4239 8.55989 13.4239C8.64789 13.4239 8.73503 13.4064 8.81627 13.3726C8.89751 13.3387 8.97124 13.2892 9.03322 13.2267L14.4732 7.78667C14.5409 7.72424 14.5949 7.64847 14.6318 7.56414C14.6688 7.4798 14.6878 7.38873 14.6878 7.29667C14.6878 7.2046 14.6688 7.11353 14.6318 7.02919C14.5949 6.94486 14.5409 6.86909 14.4732 6.80667Z" fill="black"></path> </svg></span><span class="ms-1">Unlimited Upload Files</span></li> <li class="mb-4"><span class="d-inline-block flex-shrink-0"> <svg width="18" height="18" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C19.9936 4.47982 15.5202 0.00642897 10 0Z" fill="#25CA8E"></path> <path d="M14.4732 6.80667C14.4112 6.74418 14.3375 6.69458 14.2563 6.66074C14.175 6.62689 14.0879 6.60947 13.9999 6.60947C13.9119 6.60947 13.8247 6.62689 13.7435 6.66074C13.6623 6.69458 13.5885 6.74418 13.5266 6.80667L8.55989 11.78L6.47322 9.68667C6.40887 9.62451 6.33291 9.57563 6.24967 9.54283C6.16644 9.51003 6.07755 9.49394 5.9881 9.49549C5.89865 9.49703 5.81037 9.51619 5.72832 9.55185C5.64627 9.58751 5.57204 9.63898 5.50989 9.70333C5.44773 9.76768 5.39885 9.84364 5.36605 9.92688C5.33324 10.0101 5.31716 10.099 5.31871 10.1885C5.32025 10.2779 5.3394 10.3662 5.37507 10.4482C5.41073 10.5303 5.4622 10.6045 5.52655 10.6667L8.08655 13.2267C8.14853 13.2892 8.22226 13.3387 8.3035 13.3726C8.38474 13.4064 8.47188 13.4239 8.55989 13.4239C8.64789 13.4239 8.73503 13.4064 8.81627 13.3726C8.89751 13.3387 8.97124 13.2892 9.03322 13.2267L14.4732 7.78667C14.5409 7.72424 14.5949 7.64847 14.6318 7.56414C14.6688 7.4798 14.6878 7.38873 14.6878 7.29667C14.6878 7.2046 14.6688 7.11353 14.6318 7.02919C14.5949 6.94486 14.5409 6.86909 14.4732 6.80667Z" fill="black"></path> </svg></span><span class="ms-1">Advanced Statistic With</span></li> <li class="mb-4"><span class="d-inline-block flex-shrink-0"> <svg width="18" height="18" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C19.9936 4.47982 15.5202 0.00642897 10 0Z" fill="#25CA8E"></path> <path d="M14.4732 6.80667C14.4112 6.74418 14.3375 6.69458 14.2563 6.66074C14.175 6.62689 14.0879 6.60947 13.9999 6.60947C13.9119 6.60947 13.8247 6.62689 13.7435 6.66074C13.6623 6.69458 13.5885 6.74418 13.5266 6.80667L8.55989 11.78L6.47322 9.68667C6.40887 9.62451 6.33291 9.57563 6.24967 9.54283C6.16644 9.51003 6.07755 9.49394 5.9881 9.49549C5.89865 9.49703 5.81037 9.51619 5.72832 9.55185C5.64627 9.58751 5.57204 9.63898 5.50989 9.70333C5.44773 9.76768 5.39885 9.84364 5.36605 9.92688C5.33324 10.0101 5.31716 10.099 5.31871 10.1885C5.32025 10.2779 5.3394 10.3662 5.37507 10.4482C5.41073 10.5303 5.4622 10.6045 5.52655 10.6667L8.08655 13.2267C8.14853 13.2892 8.22226 13.3387 8.3035 13.3726C8.38474 13.4064 8.47188 13.4239 8.55989 13.4239C8.64789 13.4239 8.73503 13.4064 8.81627 13.3726C8.89751 13.3387 8.97124 13.2892 9.03322 13.2267L14.4732 7.78667C14.5409 7.72424 14.5949 7.64847 14.6318 7.56414C14.6688 7.4798 14.6878 7.38873 14.6878 7.29667C14.6878 7.2046 14.6688 7.11353 14.6318 7.02919C14.5949 6.94486 14.5409 6.86909 14.4732 6.80667Z" fill="black"></path> </svg></span><span class="ms-1">Powered by state-of-the-art AI</span></li> <li><span class="d-inline-block flex-shrink-0"> <svg width="18" height="18" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="10" cy="10" r="10" fill="#E25454"></circle> <path d="M13 7L7 13" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M7 7L13 13" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg></span><span class="ms-1">Casper will adapts to each user</span></li> </ul><a class="btn btn-primary text-black" href="#"><span class="me-2">CHOOSE PLAN</span> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path> </svg></a> </div> </div> </div> <div class="col-lg-4"> <div class="rounded overflow-hidden"><img class="img-fluid d-block w-100" src="casper-assets/pricing/pricing-top-3.png" alt=""/> <div class="p-10 bg-white"><span class="d-block mb-10 display-2 fw-semibold">$150</span> <h5 class="d-block mb-1 display-4 fw-medium">Advanced</h5> <p class="small mb-8">Simply dummy text of the printing and typesetting industry.</p> <h6 class="mb-5 fw-medium">What’s included:</h6> <ul class="list-unstyled mb-8"> <li class="mb-4"><span class="d-inline-block flex-shrink-0"> <svg width="18" height="18" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C19.9936 4.47982 15.5202 0.00642897 10 0Z" fill="#25CA8E"></path> <path d="M14.4732 6.80667C14.4112 6.74418 14.3375 6.69458 14.2563 6.66074C14.175 6.62689 14.0879 6.60947 13.9999 6.60947C13.9119 6.60947 13.8247 6.62689 13.7435 6.66074C13.6623 6.69458 13.5885 6.74418 13.5266 6.80667L8.55989 11.78L6.47322 9.68667C6.40887 9.62451 6.33291 9.57563 6.24967 9.54283C6.16644 9.51003 6.07755 9.49394 5.9881 9.49549C5.89865 9.49703 5.81037 9.51619 5.72832 9.55185C5.64627 9.58751 5.57204 9.63898 5.50989 9.70333C5.44773 9.76768 5.39885 9.84364 5.36605 9.92688C5.33324 10.0101 5.31716 10.099 5.31871 10.1885C5.32025 10.2779 5.3394 10.3662 5.37507 10.4482C5.41073 10.5303 5.4622 10.6045 5.52655 10.6667L8.08655 13.2267C8.14853 13.2892 8.22226 13.3387 8.3035 13.3726C8.38474 13.4064 8.47188 13.4239 8.55989 13.4239C8.64789 13.4239 8.73503 13.4064 8.81627 13.3726C8.89751 13.3387 8.97124 13.2892 9.03322 13.2267L14.4732 7.78667C14.5409 7.72424 14.5949 7.64847 14.6318 7.56414C14.6688 7.4798 14.6878 7.38873 14.6878 7.29667C14.6878 7.2046 14.6688 7.11353 14.6318 7.02919C14.5949 6.94486 14.5409 6.86909 14.4732 6.80667Z" fill="black"></path> </svg></span><span class="ms-1">Unlimited Upload Files</span></li> <li class="mb-4"><span class="d-inline-block flex-shrink-0"> <svg width="18" height="18" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C19.9936 4.47982 15.5202 0.00642897 10 0Z" fill="#25CA8E"></path> <path d="M14.4732 6.80667C14.4112 6.74418 14.3375 6.69458 14.2563 6.66074C14.175 6.62689 14.0879 6.60947 13.9999 6.60947C13.9119 6.60947 13.8247 6.62689 13.7435 6.66074C13.6623 6.69458 13.5885 6.74418 13.5266 6.80667L8.55989 11.78L6.47322 9.68667C6.40887 9.62451 6.33291 9.57563 6.24967 9.54283C6.16644 9.51003 6.07755 9.49394 5.9881 9.49549C5.89865 9.49703 5.81037 9.51619 5.72832 9.55185C5.64627 9.58751 5.57204 9.63898 5.50989 9.70333C5.44773 9.76768 5.39885 9.84364 5.36605 9.92688C5.33324 10.0101 5.31716 10.099 5.31871 10.1885C5.32025 10.2779 5.3394 10.3662 5.37507 10.4482C5.41073 10.5303 5.4622 10.6045 5.52655 10.6667L8.08655 13.2267C8.14853 13.2892 8.22226 13.3387 8.3035 13.3726C8.38474 13.4064 8.47188 13.4239 8.55989 13.4239C8.64789 13.4239 8.73503 13.4064 8.81627 13.3726C8.89751 13.3387 8.97124 13.2892 9.03322 13.2267L14.4732 7.78667C14.5409 7.72424 14.5949 7.64847 14.6318 7.56414C14.6688 7.4798 14.6878 7.38873 14.6878 7.29667C14.6878 7.2046 14.6688 7.11353 14.6318 7.02919C14.5949 6.94486 14.5409 6.86909 14.4732 6.80667Z" fill="black"></path> </svg></span><span class="ms-1">Advanced Statistic With</span></li> <li class="mb-4"><span class="d-inline-block flex-shrink-0"> <svg width="18" height="18" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C19.9936 4.47982 15.5202 0.00642897 10 0Z" fill="#25CA8E"></path> <path d="M14.4732 6.80667C14.4112 6.74418 14.3375 6.69458 14.2563 6.66074C14.175 6.62689 14.0879 6.60947 13.9999 6.60947C13.9119 6.60947 13.8247 6.62689 13.7435 6.66074C13.6623 6.69458 13.5885 6.74418 13.5266 6.80667L8.55989 11.78L6.47322 9.68667C6.40887 9.62451 6.33291 9.57563 6.24967 9.54283C6.16644 9.51003 6.07755 9.49394 5.9881 9.49549C5.89865 9.49703 5.81037 9.51619 5.72832 9.55185C5.64627 9.58751 5.57204 9.63898 5.50989 9.70333C5.44773 9.76768 5.39885 9.84364 5.36605 9.92688C5.33324 10.0101 5.31716 10.099 5.31871 10.1885C5.32025 10.2779 5.3394 10.3662 5.37507 10.4482C5.41073 10.5303 5.4622 10.6045 5.52655 10.6667L8.08655 13.2267C8.14853 13.2892 8.22226 13.3387 8.3035 13.3726C8.38474 13.4064 8.47188 13.4239 8.55989 13.4239C8.64789 13.4239 8.73503 13.4064 8.81627 13.3726C8.89751 13.3387 8.97124 13.2892 9.03322 13.2267L14.4732 7.78667C14.5409 7.72424 14.5949 7.64847 14.6318 7.56414C14.6688 7.4798 14.6878 7.38873 14.6878 7.29667C14.6878 7.2046 14.6688 7.11353 14.6318 7.02919C14.5949 6.94486 14.5409 6.86909 14.4732 6.80667Z" fill="black"></path> </svg></span><span class="ms-1">Powered by state-of-the-art AI</span></li> <li><span class="d-inline-block flex-shrink-0"> <svg width="18" height="18" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C19.9936 4.47982 15.5202 0.00642897 10 0Z" fill="#25CA8E"></path> <path d="M14.4732 6.80667C14.4112 6.74418 14.3375 6.69458 14.2563 6.66074C14.175 6.62689 14.0879 6.60947 13.9999 6.60947C13.9119 6.60947 13.8247 6.62689 13.7435 6.66074C13.6623 6.69458 13.5885 6.74418 13.5266 6.80667L8.55989 11.78L6.47322 9.68667C6.40887 9.62451 6.33291 9.57563 6.24967 9.54283C6.16644 9.51003 6.07755 9.49394 5.9881 9.49549C5.89865 9.49703 5.81037 9.51619 5.72832 9.55185C5.64627 9.58751 5.57204 9.63898 5.50989 9.70333C5.44773 9.76768 5.39885 9.84364 5.36605 9.92688C5.33324 10.0101 5.31716 10.099 5.31871 10.1885C5.32025 10.2779 5.3394 10.3662 5.37507 10.4482C5.41073 10.5303 5.4622 10.6045 5.52655 10.6667L8.08655 13.2267C8.14853 13.2892 8.22226 13.3387 8.3035 13.3726C8.38474 13.4064 8.47188 13.4239 8.55989 13.4239C8.64789 13.4239 8.73503 13.4064 8.81627 13.3726C8.89751 13.3387 8.97124 13.2892 9.03322 13.2267L14.4732 7.78667C14.5409 7.72424 14.5949 7.64847 14.6318 7.56414C14.6688 7.4798 14.6878 7.38873 14.6878 7.29667C14.6878 7.2046 14.6688 7.11353 14.6318 7.02919C14.5949 6.94486 14.5409 6.86909 14.4732 6.80667Z" fill="black"></path> </svg></span><span class="ms-1">Casper will adapts to each user</span></li> </ul><a class="btn btn-primary text-black" href="#"><span class="me-2">CHOOSE PLAN</span> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path> </svg></a> </div> </div> </div> </div> </div> </div> </section>

Pricing Components by Shuffle

Choose from 14 variations of Pricing UI components. Presented here are variants available in Casper library.

You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Pricing UI components, code and our visual editor. Try the demo for free!

Redirecting to PayPal

Supporting tools

Plans

Pricing Components in Casper library

Framework

UI Library

Components

Pricing from Casper

Pricing from Casper

Pricing Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to live website in minutes.

Why the Lifetime License price is changing

New in your Lifetime License

AI Agent

Multi-AI Designer

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

UI Components

Extensions

Support

Company

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Pricing Components in Casper library

Framework

UI Library

Components

Pricing from Casper

Pricing from Casper

Pricing Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to live website in minutes.

Products

UI Components

Extensions

Support

Company