Tailwind CSS Pricing Sections

Pricing plan with highlighted background

Use this tailwind pricing section to highlight most popular plan along with others by highlighting it with different background.

Preview
Code

Figma File

                                                <section class="py-24 ">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="mb-12">
                <h2 class="font-manrope text-5xl text-center font-bold text-gray-900 mb-4">Choose your plan </h2>
                <p class="text-gray-500 text-center leading-6 mb-9">7 Days free trial. No credit card required.</p>
                <!--Switch-->
                <div class="flex justify-center items-center">
                    <label class="min-w-[3.5rem] text-xl relative text-gray-900 mr-4 font-medium">Bill Monthly</label>
                    <input type="checkbox" id="basic-with-description"
                        class="relative shrink-0 w-11 h-6 p-0.5 bg-indigo-100 checked:bg-none checked:bg-indigo-100 rounded-full cursor-pointer transition-colors ease-in-out duration-200  focus:border-blue-600  appearance-none 

                            before:inline-block before:w-5 before:h-5 before:bg-indigo-600 checked:before:bg-indigo-600 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform  before:transition before:ease-in-out before:duration-200 ">
                    <label class="relative min-w-[3.5rem] font-medium text-xl text-gray-500 ml-4 ">
                        Bill Yearly
                    </label>
                </div>
                <!--Switch End-->
            </div>
                <!--Grid-->
                <div class="space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-8 lg:space-y-0 lg:items-center">
                    <!--Pricing Card-->
                    <div class="flex flex-col mx-auto max-w-sm text-gray-900 rounded-2xl bg-gray-50 p-6 xl:py-9 xl:px-12 transition-all duration-500 hover:bg-gray-100">
                        <h3 class="font-manrope text-2xl font-bold mb-3">Free</h3>
                        <div class="flex items-center mb-6">
                            <span class="font-manrope mr-2 text-6xl font-semibold">$0</span>
                            <span class="text-xl text-gray-500 ">/ month</span>
                        </div>
                        <!--List-->
                        <ul class="mb-12 space-y-6 text-left text-lg text-gray-500">
                            <li class="flex items-center space-x-4">
                                <!-- Icon -->
                                <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                <span>2 auto tracking</span>
                            </li>
                            <li class="flex items-center space-x-4">
                                <!-- Icon -->
                                <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                <span>7 Day transaction clearing </span>
                            </li>
                            <li class="flex items-center space-x-4">
                                <!-- Icon -->
                                <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                <span>24/7 Customer support </span>
                            </li>
                            <li class="flex items-center space-x-4">
                                <!-- Icon -->
                                <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                <span>All widget access</span>
                            </li>
                        </ul>
                        <a href="javascript:;"  class="py-2.5 px-5 bg-indigo-600 shadow-sm rounded-full transition-all duration-500 text-base text-white font-semibold text-center w-fit mx-auto hover:bg-indigo-700">Purchase Plan</a>
                        <!--List End-->
                    </div> 
                    <!--Pricing Card-->
                    <div class="flex flex-col mx-auto max-w-sm text-gray-900 rounded-2xl bg-indigo-50 transition-all duration-500 hover:bg-indigo-100 ">
                        <div class="uppercase bg-gradient-to-r from-indigo-600 to-violet-600 rounded-t-2xl p-3 text-center text-white">
                            MOST POPULAR
                        </div>   
                        <div class="p-6 xl:py-9 xl:px-12">
                        <h3 class="font-manrope text-2xl font-bold mb-3">Advanced</h3>
                        <div class="flex items-center mb-6">
                            <span class="font-manrope mr-2 text-6xl font-semibold text-indigo-600">$150</span>
                            <span class="text-xl text-gray-500 ">/ month</span>
                        </div>
                        <!--List-->
                        <ul class="mb-12 space-y-6 text-left text-lg ">
                            <li class="flex items-center space-x-4">
                                <!-- Icon -->
                                <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                <span>AI Advisor</span>
                            </li>
                            <li class="flex items-center space-x-4">
                                <!-- Icon -->
                                <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                <span>Unlimited auto tracking</span>
                            </li>
                            <li class="flex items-center space-x-4">
                                <!-- Icon -->
                                <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                <span>1 Day transaction clearing </span>
                            </li>
                            <li class="flex items-center space-x-4">
                                <!-- Icon -->
                                <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                <span>Priority customer support</span>
                            </li>
                            <li class="flex items-center space-x-4">
                                <!-- Icon -->
                                <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                <span>All Widget Access</span>
                            </li>
                        </ul>
                        <a href="javascript:;"  class="py-2.5 px-5 bg-indigo-600 shadow-sm rounded-full transition-all duration-500 text-base text-white font-semibold text-center w-fit block mx-auto hover:bg-indigo-700">Purchase Plan</a>
                        <!--List End-->
                    </div>
                    </div> 
                     <!--Pricing Card-->
                     <div class="flex flex-col mx-auto max-w-sm text-gray-900 rounded-2xl bg-gray-50 p-6 xl:py-9 xl:px-12 transition-all duration-500 hover:bg-gray-100">
                        <h3 class="font-manrope text-2xl font-bold mb-3">Team</h3>
                        <div class="flex items-center mb-6">
                            <span class="font-manrope mr-2 text-6xl font-semibold">$180</span>
                            <span class="text-xl text-gray-500 ">/ month</span>
                        </div>
                        <!--List-->
                        <ul class="mb-12 space-y-6 text-left text-lg text-gray-500">
                            <li class="flex items-center space-x-4">
                                <!-- Icon -->
                                <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                <span>AI Advisor</span>
                            </li>
                            <li class="flex items-center space-x-4">
                                <!-- Icon -->
                                <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                <span>Unlimited auto tracking </span>
                            </li>
                            <li class="flex items-center space-x-4">
                                <!-- Icon -->
                                <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                <span>1 Day transaction clearing </span>
                            </li>
                            <li class="flex items-center space-x-4">
                                <!-- Icon -->
                                <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                <span>Priority customer support</span>
                            </li>
                            <li class="flex items-center space-x-4">
                                <!-- Icon -->
                                <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                <span>All Widget Access</span>
                            </li>
                        </ul>
                        <a href="javascript:;"  class="py-2.5 px-5 bg-indigo-600 shadow-sm rounded-full transition-all duration-500 text-base text-white font-semibold text-center w-fit mx-auto hover:bg-indigo-700">Purchase Plan</a>
                        <!--List End-->
                    </div> 
                </div>
                <!--Grid End-->
            
        </div>
    </section>

HTML Copy

Pricing plan with highlighted gradient background

It is similar to the above style only where you want to highlight the most popular and highest selling plan but here you highlight it with gradient background.

Preview
Code

Figma File

                                                <section class="py-24">
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="mb-12 text-center">
          <h2
            class="font-manrope text-5xl text-center font-bold text-gray-900 mb-4"
          >
            Our pricing plans
          </h2>
          <p class="text-gray-500 text-xl text-center leading-6 mb-12">
            7 Days free trial. No credit card required.
          </p>
          <div class="mb-10 flex justify-center">
            <span class="flex items-center">
              <svg
                class="w-16 h-11"
                viewBox="0 0 65 43"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M42.0964 4.02732C39.5251 4.74637 37.1135 5.87152 34.9795 7.36979C34.0529 8.02188 33.2561 8.68389 32.5982 9.38799C32.5386 9.38153 32.482 9.38579 32.4118 9.38233C30.1332 9.37225 27.711 10.2114 25.0194 11.9465C20.4292 14.906 16.7212 19.2023 14.2904 24.3897C12.0636 29.1502 11.0911 34.265 11.4596 39.2591L7.6368 36.04L6.83225 37.0047L12.587 41.8449L16.9956 35.7576L15.9819 35.024L13.1146 38.9812C12.4253 28.9566 17.4523 18.8014 25.9225 13.3583C27.861 12.1112 29.6087 11.3798 31.2299 11.146C30.6487 12.083 30.2872 13.0624 30.1426 14.0738C29.9087 15.7573 30.5083 17.6123 31.7101 18.8943C32.6977 19.9474 33.9541 20.4744 35.2551 20.3764C36.5669 20.2755 37.7738 19.5103 38.5629 18.2841C39.4661 16.8873 39.6838 15.1043 39.1492 13.6472C38.4686 11.7917 36.7603 10.3508 34.6701 9.73325C35.0524 9.40674 35.4806 9.07896 35.9331 8.75591C42.0235 4.51004 50.3771 3.60724 57.2293 6.46459L57.8719 4.92101C54.237 3.40628 50.175 2.84314 46.1137 3.2738C44.7513 3.40049 43.4035 3.6618 42.0964 4.02732ZM37.5828 14.2008C37.9503 15.1845 37.7787 16.3883 37.1605 17.3586C36.9123 17.7517 36.3954 18.3817 35.5811 18.6094C35.4419 18.6483 35.2889 18.6795 35.1406 18.6863C34.3594 18.743 33.5726 18.4082 32.933 17.7318C32.0791 16.8263 31.6418 15.4691 31.8087 14.2898C31.9645 13.1944 32.4639 12.1301 33.2993 11.1106C35.286 11.3987 36.9819 12.5889 37.5828 14.2008Z"
                  fill="#9CA3AF"
                />
              </svg>

              <span
                class="inline-block whitespace-nowrap text-xs leading-4 font-semibold tracking-wide bg-indigo-50 text-indigo-600 rounded-full py-2 px-4"
                >Save 20%</span
              >
            </span>
          </div>
          <!--Switch-->
          <div class="tabs">
            <div
              class="flex justify-center items-center bg-gray-100 rounded-full p-1.5 max-w-sm mx-auto"
            >
              <a
                href="javascript:void(0)"
                class="inline-block w-1/2 text-center transition-all duration-500 rounded-full text-gray-400 font-semibold py-3 px-3 lg:px-11 hover:text-indigo-600 tab-active:bg-indigo-600 tab-active:rounded-full tab-active:text-white tablink whitespace-nowrap active"
                data-tab="tabs-with-background-1"
                role="tab"
              >
                Bill Yearly
              </a>
              <a
                href="javascript:void(0)"
                class="inline-block w-1/2 text-center transition-all duration-500 rounded-full text-gray-400 font-semibold py-3 px-3 lg:px-11 hover:text-indigo-600 tab-active:bg-indigo-600 tab-active:rounded-full tab-active:text-white tablink whitespace-nowrap"
                data-tab="tabs-with-background-2"
                role="tab"
              >
                Bill Monthly
              </a>
            </div>

            <div
              id="tabs-with-background-1"
              role="tabpanel"
              aria-labelledby="tabs-with-background-item-1"
              class="tabcontent mt-12"
              style=""
            >
              <div
                class="space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-8 lg:space-y-0"
              >
                <!--Pricing Card-->
                <div
                  class="group relative flex flex-col mx-auto w-full max-w-sm text-gray-900 rounded-2xl border border-solid border-gray-300 text-center transition-all duration-300 p-6 xl:p-12 hover:border-indigo-600"
                >
                  <h3 class="font-manrope text-2xl font-bold mb-6">Free</h3>
                  <div class="mb-20 flex flex-col">
                    <span class="font-manrope text-6xl font-semibold mb-2"
                      >$0</span
                    >
                    <span class="text-xl text-gray-400">Lifetime</span>
                  </div>
                  <a
                    href="javascript:;"
                    class="py-2.5 px-5 bg-indigo-50 shadow-sm rounded-full transition-all duration-500 text-base text-indigo-600 font-semibold text-center w-fit mx-auto group-hover:bg-indigo-600 group-hover:text-white"
                    >Purchase Plan</a
                  >
                  <!--List End-->
                </div>
                <!--Pricing Card-->
                <div
                  class="group relative flex flex-col mx-auto w-full max-w-sm text-gray-900 rounded-2xl border border-solid border-gray-300 text-center transition-all duration-500 p-6 xl:p-12 bg-gradient-to-r from-indigo-600 to-violet-600 hover:before:opacity-100 before:contents[' '] before:absolute before:bg-indigo-800 before:w-full before:h-full before:top-0 before:left-0 before:rounded-2xl before:opacity-0 before:transition-all before:duration-500 before:z-0"
                >
                  <h3
                    class="relative flex items-center justify-center font-manrope text-2xl font-bold mb-6 text-white"
                  >
                    Advanced
                    <span
                      class="h-6 px-3 relative rounded-full border border-solid border-gray-100 text-sm ml-4"
                      >Popular</span
                    >
                  </h3>
                  <div class="mb-20 flex flex-col relative">
                    <span
                      class="font-manrope text-6xl font-semibold mb-2 text-white"
                      >$150</span
                    >
                    <span class="text-xl text-gray-300">Per year</span>
                  </div>
                  <a
                    href="javascript:;"
                    class="relative py-2.5 px-5 bg-white shadow-sm rounded-full transition-all duration-500 text-base text-indigo-600 font-semibold text-center w-fit mx-auto"
                    >Purchase Plan</a
                  >
                  <!--List End-->
                </div>
                <!--Pricing Card-->
                <div
                  class="group relative flex flex-col mx-auto w-full max-w-sm text-gray-900 rounded-2xl border border-solid border-gray-300 text-center transition-all duration-300 p-8 xl:p-12 hover:border-indigo-600"
                >
                  <h3 class="font-manrope text-2xl font-bold mb-6">Team</h3>
                  <div class="mb-20 flex flex-col">
                    <span class="font-manrope text-6xl font-semibold mb-2"
                      >$180</span
                    >
                    <span class="text-xl text-gray-400">Per year</span>
                  </div>
                  <a
                    href="javascript:;"
                    class="py-2.5 px-5 bg-indigo-50 shadow-sm rounded-full transition-all duration-500 text-base text-indigo-600 font-semibold text-center w-fit mx-auto group-hover:bg-indigo-600 group-hover:text-white"
                    >Purchase Plan</a
                  >
                  <!--List End-->
                </div>
              </div>
            </div>
            <div
              id="tabs-with-background-2"
              class="tabcontent mt-12"
              role="tabpanel"
              aria-labelledby="tabs-with-background-item-2"
              style="display: none"
            >
              <div
                class="space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-8 lg:space-y-0"
              >
                <!--Pricing Card-->
                <div
                  class="group relative flex flex-col mx-auto w-full max-w-sm text-gray-900 rounded-2xl border border-solid border-gray-300 text-center transition-all duration-300 p-6 xl:p-12 hover:border-indigo-600"
                >
                  <h3 class="font-manrope text-2xl font-bold mb-6">Free</h3>
                  <div class="mb-20 flex flex-col">
                    <span class="font-manrope text-6xl font-semibold mb-2"
                      >$0</span
                    >
                    <span class="text-xl text-gray-400">Lifetime</span>
                  </div>
                  <a
                    href="javascript:;"
                    class="py-2.5 px-5 bg-indigo-50 shadow-sm rounded-full transition-all duration-500 text-base text-indigo-600 font-semibold text-center w-fit mx-auto group-hover:bg-indigo-600 group-hover:text-white"
                    >Purchase Plan</a
                  >
                  <!--List End-->
                </div>
                <!--Pricing Card-->
                <div
                  class="group relative flex flex-col mx-auto w-full max-w-sm text-gray-900 rounded-2xl border border-solid border-gray-300 text-center transition-all duration-500 p-6 xl:p-12 bg-gradient-to-r from-indigo-600 to-violet-600 hover:before:opacity-100 before:contents[' '] before:absolute before:bg-indigo-800 before:w-full before:h-full before:top-0 before:left-0 before:rounded-2xl before:opacity-0 before:transition-all before:duration-500 before:z-0"
                >
                  <h3
                    class="relative flex items-center justify-center font-manrope text-2xl font-bold mb-6 text-white"
                  >
                    Advanced
                    <span
                      class="h-6 px-3 relative rounded-full border border-solid border-gray-100 text-sm ml-4"
                      >Popular</span
                    >
                  </h3>
                  <div class="mb-20 flex flex-col relative">
                    <span
                      class="font-manrope text-6xl font-semibold mb-2 text-white"
                      >$39</span
                    >
                    <span class="text-xl text-gray-300">Per Month</span>
                  </div>
                  <a
                    href="javascript:;"
                    class="relative py-2.5 px-5 bg-white shadow-sm rounded-full transition-all duration-500 text-base text-indigo-600 font-semibold text-center w-fit mx-auto"
                    >Purchase Plan</a
                  >
                  <!--List End-->
                </div>
                <!--Pricing Card-->
                <div
                  class="group relative flex flex-col mx-auto w-full max-w-sm text-gray-900 rounded-2xl border border-solid border-gray-300 text-center transition-all duration-300 p-8 xl:p-12 hover:border-indigo-600"
                >
                  <h3 class="font-manrope text-2xl font-bold mb-6">Team</h3>
                  <div class="mb-20 flex flex-col">
                    <span class="font-manrope text-6xl font-semibold mb-2"
                      >$49</span
                    >
                    <span class="text-xl text-gray-400">Per Month</span>
                  </div>
                  <a
                    href="javascript:;"
                    class="py-2.5 px-5 bg-indigo-50 shadow-sm rounded-full transition-all duration-500 text-base text-indigo-600 font-semibold text-center w-fit mx-auto group-hover:bg-indigo-600 group-hover:text-white"
                    >Purchase Plan</a
                  >
                  <!--List End-->
                </div>
              </div>
            </div>
          </div>

          <!--Switch End-->
        </div>
      </div>
    </section>

HTML Copy

Tailwind Pricing Table with gradient background

This makes pricing plan table look super special. Where entire background of the page is highlighted in different colour as shown the the example below.

Preview
Code

Figma File

                                                <section class="py-24 relative">
        <div class="absolute h-[36.5rem] w-full top-0 bg-gradient-to-r from-indigo-600 to-violet-600 -z-10"></div>
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="mb-12">
                <h2 class="font-manrope text-5xl text-center font-bold text-white mb-4">Suitable pricing plans</h2>
                <p class="text-gray-300 text-xl text-center leading-6">7 Days free trial. No credit card required.</p>
             
            </div>
                <!--Grid-->
                <div class="space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-8 lg:space-y-0 lg:items-center">
                    <!--Pricing Card-->
                    <div class="group relative flex flex-col mx-auto w-full max-w-sm bg-white rounded-2xl shadow-2xl transition-all duration-300  p-8 xl:p-12  ">
                        <div class="border-b border-solid border-gray-200 pb-9 mb-9">
                            <div class="w-16 h-16 rounded-full bg-indigo-50 mx-auto flex justify-center items-center transition-all duration-300 group-hover:bg-indigo-600">
                            <svg class="w-6 h-6 text-indigo-600 transition-all duration-300 group-hover:text-white" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.42418 27.2608V12.0502C8.42418 11.8031 8.22388 11.6028 7.97681 11.6028V11.6028C5.55154 11.6028 4.3389 11.6028 3.58547 12.3562C2.83203 13.1097 2.83203 14.3223 2.83203 16.7476V22.116C2.83203 24.5413 2.83203 25.754 3.58547 26.5074C4.3389 27.2608 5.55154 27.2608 7.97681 27.2608H8.42418ZM8.42418 27.2608L8.42418 22.5246C8.42418 15.9141 9.90241 9.38734 12.7507 3.42199V3.42199C13.2066 2.46714 14.4408 2.19891 15.2519 2.87841C16.4455 3.87836 17.135 5.35554 17.135 6.91266V8.08463C17.135 9.40562 18.2059 10.4765 19.5269 10.4765H24.0982C25.1518 10.4765 25.6786 10.4765 26.0736 10.6078C27.0571 10.9346 27.7484 11.8197 27.8273 12.8531C27.859 13.2681 27.7314 13.7792 27.4762 14.8014L25.3389 23.3623C24.8715 25.2346 24.6377 26.1707 23.9399 26.7158C23.242 27.2609 22.2771 27.2609 20.3473 27.2609L8.42418 27.2608Z" stroke="currentColor" stroke-width="2"/>
                                </svg>
                        </div>
                        <h3 class="font-manrope text-2xl font-bold my-7 text-center text-indigo-600">Free Plan</h3>
                        <div class="flex items-center justify-center">
                            <span class="font-manrope text-4xl font-medium text-gray-900">$0</span>
                            <span class="text-xl text-gray-500 ml-3">|&nbsp; Month</span>
                        </div>
                    </div>
                        <!--List-->
                        <ul class="mb-12 space-y-6 text-left text-lg text-gray-600 group-hover:text-gray-900">
                            <li class="flex items-center space-x-3.5">
                                <!-- Icon -->
                                <span class="w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
                                <span>AI advisor for a day</span>
                            </li>
                            <li class="flex items-center space-x-3.5">
                                <!-- Icon -->
                                <span class="w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
                                <span>2 auto tracking</span>
                            </li>
                            <li class="flex items-center space-x-3.5">
                                <!-- Icon -->
                                <span class="w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
                                <span>7 Day transaction clearing </span>
                            </li>
                            <li class="flex items-center space-x-3.5">
                                <!-- Icon -->
                                <span class="w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
                                <span>24/7 Customer support</span>
                            </li>
                        </ul>
                        <a href="javascript:;"  class="py-2.5 px-5 bg-indigo-50 shadow-sm rounded-full transition-all duration-500 text-base text-indigo-600 font-semibold text-center w-fit mx-auto group-hover:bg-indigo-600 group-hover:text-white ">Purchase Plan</a>
                        <!--List End-->
                    </div> 
                    <!--Pricing Card-->
                    <div class="group relative flex flex-col mx-auto w-full max-w-sm bg-white rounded-2xl shadow-2xl transition-all duration-300  p-8 xl:p-12  ">
                        <div class="border-b border-solid border-gray-200 pb-9 mb-9">
                            <div class="w-16 h-16 rounded-full bg-indigo-50 mx-auto flex justify-center items-center transition-all duration-300 group-hover:bg-indigo-600">
                        
                                <svg class="w-6 h-6 text-indigo-600 transition-all duration-300 group-hover:text-white"  viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M26.8333 21.25C26.8333 20.6977 26.3856 20.25 25.8333 20.25C25.281 20.25 24.8333 20.6977 24.8333 21.25H26.8333ZM5.16667 21.25C5.16667 20.6977 4.71895 20.25 4.16667 20.25C3.61438 20.25 3.16667 20.6977 3.16667 21.25H5.16667ZM4.16667 8.85714H25.8333V6.85714H4.16667V8.85714ZM26.5 9.64286V16.7857H28.5V9.64286H26.5ZM3.5 16.7857V9.64286H1.5V16.7857H3.5ZM12.5 17.5714H4.16667V19.5714H12.5V17.5714ZM25.8333 17.5714H17.5V19.5714H25.8333V17.5714ZM1.5 16.7857C1.5 18.2581 2.63005 19.5714 4.16667 19.5714V17.5714C3.86234 17.5714 3.5 17.2858 3.5 16.7857H1.5ZM26.5 16.7857C26.5 17.2858 26.1377 17.5714 25.8333 17.5714V19.5714C27.37 19.5714 28.5 18.2581 28.5 16.7857H26.5ZM25.8333 8.85714C26.1377 8.85714 26.5 9.14282 26.5 9.64286H28.5C28.5 8.17045 27.37 6.85714 25.8333 6.85714V8.85714ZM4.16667 6.85714C2.63004 6.85714 1.5 8.17045 1.5 9.64286H3.5C3.5 9.14282 3.86234 8.85714 4.16667 8.85714V6.85714ZM24.8333 21.25V25.7143H26.8333V21.25H24.8333ZM24.1667 26.5H5.83333V28.5H24.1667V26.5ZM5.16667 25.7143V21.25H3.16667V25.7143H5.16667ZM5.83333 26.5C5.52901 26.5 5.16667 26.2143 5.16667 25.7143H3.16667C3.16667 27.1867 4.29671 28.5 5.83333 28.5V26.5ZM24.8333 25.7143C24.8333 26.2143 24.471 26.5 24.1667 26.5V28.5C25.7033 28.5 26.8333 27.1867 26.8333 25.7143H24.8333ZM12.5 3.5H17.5V1.5H12.5V3.5ZM18.1667 4.28571V7.85714H20.1667V4.28571H18.1667ZM11.8333 7.85714V4.28571H9.83333V7.85714H11.8333ZM17.5 3.5C17.8043 3.5 18.1667 3.78567 18.1667 4.28571H20.1667C20.1667 2.81331 19.0366 1.5 17.5 1.5V3.5ZM12.5 1.5C10.9634 1.5 9.83333 2.81331 9.83333 4.28571H11.8333C11.8333 3.78567 12.1957 3.5 12.5 3.5V1.5ZM14.1667 16H15.8333V14H14.1667V16ZM16.5 16.7857V20.3571H18.5V16.7857H16.5ZM15.8333 21.1429H14.1667V23.1429H15.8333V21.1429ZM13.5 20.3571V16.7857H11.5V20.3571H13.5ZM14.1667 21.1429C13.8623 21.1429 13.5 20.8572 13.5 20.3571H11.5C11.5 21.8295 12.63 23.1429 14.1667 23.1429V21.1429ZM16.5 20.3571C16.5 20.8572 16.1377 21.1429 15.8333 21.1429V23.1429C17.37 23.1429 18.5 21.8295 18.5 20.3571H16.5ZM15.8333 16C16.1377 16 16.5 16.2857 16.5 16.7857H18.5C18.5 15.3133 17.37 14 15.8333 14V16ZM14.1667 14C12.63 14 11.5 15.3133 11.5 16.7857H13.5C13.5 16.2857 13.8623 16 14.1667 16V14Z" fill="currentcolor"/>
                                    </svg>
                                    
                        </div>
                        <h3 class="font-manrope text-2xl font-bold my-7 text-center text-indigo-600">Business Plan</h3>
                        <div class="flex items-center justify-center">
                            <span class="font-manrope text-4xl font-medium text-gray-900">$150</span>
                            <span class="text-xl text-gray-500 ml-3">|&nbsp; Month</span>
                        </div>
                    </div>
                        <!--List-->
                        <ul class="mb-12 space-y-6 text-left text-lg text-gray-600 group-hover:text-gray-900">
                            <li class="flex items-center space-x-3.5">
                                <!-- Icon -->
                                <span class="w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
                                <span>AI advisor full time</span>
                            </li>
                            <li class="flex items-center space-x-3.5">
                                <!-- Icon -->
                                <span class="w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
                                <span>Unlimited auto tracking</span>
                            </li>
                            <li class="flex items-center space-x-3.5">
                                <!-- Icon -->
                                <span class="w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
                                <span>1 Day transaction clearing </span>
                            </li>
                            <li class="flex items-center space-x-3.5">
                                <!-- Icon -->
                                <span class="w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
                                <span>Priority customer support</span>
                            </li>
                        </ul>
                        <a href="javascript:;"  class="py-2.5 px-5 bg-indigo-50 shadow-sm rounded-full transition-all duration-500 text-base text-indigo-600 font-semibold text-center w-fit mx-auto group-hover:bg-indigo-600 group-hover:text-white ">Purchase Plan</a>
                        <!--List End-->
                    </div> 
                    <!--Pricing Card-->
                  <div class="group relative flex flex-col mx-auto w-full max-w-sm bg-white rounded-2xl shadow-2xl transition-all duration-300  p-8 xl:p-12  ">
                    <div class="border-b border-solid border-gray-200 pb-9 mb-9">
                        <div class="w-16 h-16 rounded-full bg-indigo-50 mx-auto flex justify-center items-center transition-all duration-300 group-hover:bg-indigo-600">
                            <svg class="w-6 h-6 text-indigo-600 transition-all duration-300 group-hover:text-white" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M18.1641 14.75C18.7163 14.75 19.1641 14.3023 19.1641 13.75C19.1641 13.1977 18.7163 12.75 18.1641 12.75V14.75ZM13.1641 12.75C12.6118 12.75 12.1641 13.1977 12.1641 13.75C12.1641 14.3023 12.6118 14.75 13.1641 14.75V12.75ZM18.1641 19.75C18.7163 19.75 19.1641 19.3023 19.1641 18.75C19.1641 18.1977 18.7163 17.75 18.1641 17.75V19.75ZM13.1641 17.75C12.6118 17.75 12.1641 18.1977 12.1641 18.75C12.1641 19.3023 12.6118 19.75 13.1641 19.75V17.75ZM16.6641 23.75C16.6641 23.1977 16.2163 22.75 15.6641 22.75C15.1118 22.75 14.6641 23.1977 14.6641 23.75H16.6641ZM14.6641 27.5C14.6641 28.0523 15.1118 28.5 15.6641 28.5C16.2163 28.5 16.6641 28.0523 16.6641 27.5H14.6641ZM18.7499 3.08579L18.0427 2.37868L18.7499 3.08579ZM27.5783 3.08579L26.8712 3.79289L27.5783 3.08579ZM12.5783 3.08579L11.8712 3.79289L12.5783 3.08579ZM9.99985 8.08579L10.707 8.79289L9.99985 8.08579ZM21.3283 8.08579L22.0354 7.37868L21.3283 8.08579ZM21.3283 26.9142L20.6212 26.2071L21.3283 26.9142ZM27.5783 21.9142L28.2854 22.6213L27.5783 21.9142ZM9.99985 26.9142L10.707 26.2071L9.99985 26.9142ZM13.4141 8.5H17.9141V6.5H13.4141V8.5ZM20.9141 11.5V23.5H22.9141V11.5H20.9141ZM17.9141 26.5H13.4141V28.5H17.9141V26.5ZM10.4141 23.5V11.5H8.41406V23.5H10.4141ZM7.16407 3.5H9.16407V1.5H7.16407V3.5ZM4.16406 18.5L4.16407 6.5L2.16407 6.5L2.16406 18.5H4.16406ZM12.1641 6.5V7.5H14.1641V6.5H12.1641ZM9.41406 21.5H7.16406L7.16406 23.5H9.41406L9.41406 21.5ZM24.1641 1.5H22.1641V3.5H24.1641V1.5ZM29.1641 18.5V6.5H27.1641V18.5H29.1641ZM17.1641 6.5V7.5H19.1641V6.5H17.1641ZM21.9141 23.5H24.1641V21.5H21.9141V23.5ZM18.1641 12.75H13.1641V14.75H18.1641V12.75ZM18.1641 17.75H13.1641V19.75H18.1641V17.75ZM14.6641 23.75V27.5H16.6641V23.75H14.6641ZM22.1641 1.5C21.2495 1.5 20.463 1.49788 19.8363 1.58214C19.1808 1.67027 18.5524 1.86902 18.0427 2.37868L19.457 3.79289C19.5331 3.71677 19.669 3.62262 20.1028 3.56431C20.5653 3.50212 21.193 3.5 22.1641 3.5V1.5ZM19.1641 6.5C19.1641 5.52892 19.1662 4.90121 19.2284 4.4387C19.2867 4.00496 19.3808 3.86902 19.457 3.79289L18.0427 2.37868C17.5331 2.88834 17.3343 3.51669 17.2462 4.17221C17.1619 4.79896 17.1641 5.58546 17.1641 6.5H19.1641ZM24.1641 3.5C25.1351 3.5 25.7628 3.50212 26.2254 3.56431C26.6591 3.62262 26.795 3.71677 26.8712 3.79289L28.2854 2.37868C27.7757 1.86902 27.1474 1.67027 26.4918 1.58214C25.8651 1.49788 25.0786 1.5 24.1641 1.5V3.5ZM29.1641 6.5C29.1641 5.58546 29.1662 4.79896 29.0819 4.17221C28.9938 3.51669 28.795 2.88834 28.2854 2.37868L26.8712 3.79289C26.9473 3.86902 27.0414 4.00496 27.0998 4.4387C27.1619 4.90121 27.1641 5.52892 27.1641 6.5H29.1641ZM2.16406 18.5C2.16406 19.4145 2.16194 20.201 2.2462 20.8278C2.33434 21.4833 2.53308 22.1117 3.04274 22.6213L4.45696 21.2071C4.38083 21.131 4.28668 20.995 4.22837 20.5613C4.16619 20.0988 4.16406 19.4711 4.16406 18.5H2.16406ZM7.16406 21.5C6.19298 21.5 5.56527 21.4979 5.10277 21.4357C4.66903 21.3774 4.53308 21.2832 4.45696 21.2071L3.04274 22.6213C3.5524 23.131 4.18075 23.3297 4.83627 23.4179C5.46302 23.5021 6.24952 23.5 7.16406 23.5L7.16406 21.5ZM9.16407 3.5C10.1351 3.5 10.7629 3.50212 11.2254 3.56431C11.6591 3.62262 11.795 3.71677 11.8712 3.79289L13.2854 2.37868C12.7757 1.86902 12.1474 1.67027 11.4919 1.58214C10.8651 1.49788 10.0786 1.5 9.16407 1.5V3.5ZM14.1641 6.5C14.1641 5.58546 14.1662 4.79896 14.0819 4.17221C13.9938 3.51669 13.795 2.88834 13.2854 2.37868L11.8712 3.79289C11.9473 3.86902 12.0414 4.00496 12.0998 4.4387C12.1619 4.90121 12.1641 5.52892 12.1641 6.5H14.1641ZM7.16407 1.5C6.24953 1.5 5.46303 1.49788 4.83628 1.58214C4.18076 1.67027 3.55241 1.86902 3.04275 2.37868L4.45696 3.79289C4.53309 3.71677 4.66903 3.62262 5.10277 3.56431C5.56528 3.50212 6.19299 3.5 7.16407 3.5V1.5ZM4.16407 6.5C4.16407 5.52892 4.16619 4.90121 4.22838 4.4387C4.28669 4.00496 4.38084 3.86902 4.45696 3.79289L3.04275 2.37868C2.53309 2.88834 2.33434 3.51669 2.24621 4.17221C2.16195 4.79896 2.16407 5.58546 2.16407 6.5L4.16407 6.5ZM13.4141 6.5C12.4995 6.5 11.713 6.49788 11.0863 6.58214C10.4308 6.67027 9.8024 6.86902 9.29274 7.37868L10.707 8.79289C10.7831 8.71677 10.919 8.62262 11.3528 8.56431C11.8153 8.50212 12.443 8.5 13.4141 8.5V6.5ZM10.4141 11.5C10.4141 10.5289 10.4162 9.90121 10.4784 9.4387C10.5367 9.00496 10.6308 8.86902 10.707 8.79289L9.29274 7.37868C8.78308 7.88834 8.58433 8.51669 8.4962 9.17221C8.41194 9.79896 8.41406 10.5855 8.41406 11.5H10.4141ZM17.9141 8.5C18.8851 8.5 19.5129 8.50212 19.9754 8.56431C20.4091 8.62262 20.545 8.71677 20.6212 8.79289L22.0354 7.37868C21.5257 6.86902 20.8974 6.67027 20.2419 6.58214C19.6151 6.49788 18.8286 6.5 17.9141 6.5V8.5ZM22.9141 11.5C22.9141 10.5855 22.9162 9.79896 22.8319 9.17221C22.7438 8.51669 22.545 7.88834 22.0354 7.37868L20.6212 8.79289C20.6973 8.86902 20.7914 9.00496 20.8498 9.4387C20.9119 9.90121 20.9141 10.5289 20.9141 11.5H22.9141ZM20.9141 23.5C20.9141 24.4711 20.9119 25.0988 20.8498 25.5613C20.7914 25.995 20.6973 26.131 20.6212 26.2071L22.0354 27.6213C22.545 27.1117 22.7438 26.4833 22.8319 25.8278C22.9162 25.201 22.9141 24.4145 22.9141 23.5H20.9141ZM17.9141 28.5C18.8286 28.5 19.6151 28.5021 20.2419 28.4179C20.8974 28.3297 21.5257 28.131 22.0354 27.6213L20.6212 26.2071C20.545 26.2832 20.4091 26.3774 19.9754 26.4357C19.5129 26.4979 18.8851 26.5 17.9141 26.5V28.5ZM27.1641 18.5C27.1641 19.4711 27.1619 20.0988 27.0998 20.5613C27.0414 20.995 26.9473 21.131 26.8712 21.2071L28.2854 22.6213C28.795 22.1117 28.9938 21.4833 29.0819 20.8278C29.1662 20.201 29.1641 19.4145 29.1641 18.5H27.1641ZM24.1641 23.5C25.0786 23.5 25.8651 23.5021 26.4918 23.4179C27.1474 23.3297 27.7757 23.131 28.2854 22.6213L26.8712 21.2071C26.795 21.2832 26.6591 21.3774 26.2254 21.4357C25.7628 21.4979 25.1351 21.5 24.1641 21.5V23.5ZM13.4141 26.5C12.443 26.5 11.8153 26.4979 11.3528 26.4357C10.919 26.3774 10.7831 26.2832 10.707 26.2071L9.29274 27.6213C9.8024 28.131 10.4308 28.3297 11.0863 28.4179C11.713 28.5021 12.4995 28.5 13.4141 28.5V26.5ZM8.41406 23.5C8.41406 24.4145 8.41194 25.201 8.4962 25.8278C8.58433 26.4833 8.78308 27.1117 9.29274 27.6213L10.707 26.2071C10.6308 26.131 10.5367 25.995 10.4784 25.5613C10.4162 25.0988 10.4141 24.4711 10.4141 23.5H8.41406Z" fill="currentColor"/>
                                </svg>
                                
                    </div>
                    <h3 class="font-manrope text-2xl font-bold my-7 text-center text-indigo-600">Enterprise Plan</h3>
                    <div class="flex items-center justify-center">
                        <span class="font-manrope text-4xl font-medium text-gray-900">$180</span>
                        <span class="text-xl text-gray-500 ml-3">|&nbsp; Month</span>
                    </div>
                </div>
                    <!--List-->
                    <ul class="mb-12 space-y-6 text-left text-lg text-gray-600 group-hover:text-gray-900">
                        <li class="flex items-center space-x-3.5">
                            <!-- Icon -->
                            <span class="w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
                            <span>AI advisor full time</span>
                        </li>
                        <li class="flex items-center space-x-3.5">
                            <!-- Icon -->
                            <span class="w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
                            <span>Unlimited auto tracking</span>
                        </li>
                        <li class="flex items-center space-x-3.5">
                            <!-- Icon -->
                            <span class="w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
                            <span>1 Day transaction clearing </span>
                        </li>
                        <li class="flex items-center space-x-3.5">
                            <!-- Icon -->
                            <span class="w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
                            <span>Priority customer support</span>
                        </li>
                    </ul>
                    <a href="javascript:;"  class="py-2.5 px-5 bg-indigo-50 shadow-sm rounded-full transition-all duration-500 text-base text-indigo-600 font-semibold text-center w-fit mx-auto group-hover:bg-indigo-600 group-hover:text-white ">Purchase Plan</a>
                    <!--List End-->
                </div> 
                </div>
                <!--Grid End-->
        </div>
    </section>

HTML Copy

Image as pricing card background

Different images can be kept behind each of the card as background. Check below tailwind pricing component to see how it works.

Preview
Code

Figma File

Pricing plan for dark theme

Following example illustrates how pricing page should be designed for dark themed web page designed for pricing.

Preview
Code

Figma File

Tailwind CSS Pricing cards

By following this style one can keep two cards in one row.

Preview
Code

Figma File

Pricing Table centrally aligned

When you want to show pricing table designed in Tailwind CSS with centrally aligned this example can be used.

Preview
Code

Figma File

Pricing table with four tiers

When four different pricing plans need to be shown using same colour shaded in that case following tailwind pricing table should be used.

Preview
Code

Figma File

Three tiers with toggle

In this example one can display three tier pricing plans and also with toggle they can display monthly and annual pricing.

Preview
Code

Figma File

Feature list with pricing plan

All the features of the product or the service can be listed on the left side of the page while showing pricing options in the left.

Preview
Code

Figma File

Horizontal card as testimonial

If you want to keep pricing card in testimonial then this example can be used which will also have navigational arrows to slide forward or backward.

Preview
Code

Figma File

Simple transparent pricing table

Simple design pricing table designed in tailwind css shows different pricing options where you can highlight one option which is your best selling plan.

Preview
Code

Figma File

Pricing card with highlighted border

All the displayed plans will have highlighted border in this design with the option of toggle which will help you move from monthly to annual and vice versa.

Preview
Code

Figma File

Pricing card with bordered layout

Rounded bordered layout looks unique and helps your users decide the best plan as it has been highlighted in different colour.

Preview
Code

Figma File

Image with pricing card

This example can be used if you want image next to card in a one row.

Preview
Code

Figma File

Pricing card with highlighted price

Use this example to highlight price of card using background and highlight popular plan with gradient background with and toggle to switch the pricing plan based on a monthly or yearly plan.

Preview
Code

Figma File

Highlight pricing feature

This example can be used if you want to highlight features of pricing plans on top of the card.

Preview
Code

Figma File

Tailwind CSS Pricing cards with border separation

You can add separator between cards and set toggle for different subscription plans like annual or monthly.

Preview
Code

Figma File

Pricing plan for dark theme with feature list

All the features of the product or the services can be listed on the right side of the page while showing pricing package in dark theme.

Preview
Code

Figma File

Ranking Analyzer with dark theme

This example can be used if you want Search Ranking Analyzer with features list with span button, heading on dark theme.

Preview
Code

Figma File

Horizontal card with pricing plans as testimonial

If you want to keep pricing card in testimonial then this example can be used which will also have navigational arrows to slide forward or backward.

Preview
Code

Figma File

Pricing card with CTA button

This example can be used if you want pricing plan card with features and CTA button.

Preview
Code

Figma File

Pricing Model with table

This example can be used if you want pricing Model with table and progress bar.

Preview
Code

Figma File

Pricing plans as testimonials

If you want to keep pricing card in testimonial then this example can be used which will also have navigational arrows to slide forward or backward with CTA buttons.

Preview
Code

Figma File

Pricing plans with gradient background

This example can be used if you want pricing plan card with gradient background on hover effect.

Preview
Code

Figma File

Figma Design System

Tailwind CSS Blocks

Tailwind Colors

Icons

Tailwind Templates Coming soon

Pricing plan with highlighted background

Pricing plan with highlighted gradient background

Tailwind Pricing Table with gradient background

Image as pricing card background

Pricing plan for dark theme

Tailwind CSS Pricing cards

Pricing Table centrally aligned

Pricing table with four tiers

Three tiers with toggle

Feature list with pricing plan

Horizontal card as testimonial

Simple transparent pricing table

Pricing card with highlighted border

Pricing card with bordered layout

Image with pricing card

Pricing card with highlighted price

Highlight pricing feature

Tailwind CSS Pricing cards with border separation

Pricing plan for dark theme with feature list

Ranking Analyzer with dark theme

Horizontal card with pricing plans as testimonial

Pricing card with CTA button

Pricing Model with table

Pricing plans as testimonials

Pricing plans with gradient background