NotionNext/themes/starter/components/Pricing.js

export const Pricing = () => {
  return <>
       {/* <!-- ====== Pricing Section Start --> */}
       <section
      id="pricing"
      class="relative z-20 overflow-hidden bg-white pb-12 pt-20 dark:bg-dark lg:pb-[90px] lg:pt-[120px]"
    >
      <div class="container mx-auto">
        <div class="-mx-4 flex flex-wrap">
          <div class="w-full px-4">
            <div class="mx-auto mb-[60px] max-w-[510px] text-center">
              <span class="mb-2 block text-lg font-semibold text-primary">
                Pricing Table
              </span>
              <h2
                class="mb-3 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]"
              >
                Awesome Pricing Plan
              </h2>
              <p class="text-base text-body-color dark:text-dark-6">
                There are many variations of passages of Lorem Ipsum available
                but the majority have suffered alteration in some form.
              </p>
            </div>
          </div>
        </div>
        <div class="-mx-4 flex flex-wrap justify-center">
          <div class="w-full px-4 md:w-1/2 lg:w-1/3">
            <div
              class="relative z-10 mb-10 overflow-hidden rounded-xl bg-white px-8 py-10 shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14"
            >
              <span
                class="mb-5 block text-xl font-medium text-dark dark:text-white"
              >
                Starter
              </span>
              <h2
                class="mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]"
              >
                <span class="text-xl font-medium">$</span>
                <span class="-ml-1 -tracking-[2px]">25.00</span>
                <span
                  class="text-base font-normal text-body-color dark:text-dark-6"
                >
                  Per Month
                </span>
              </h2>
              <div class="mb-[50px]">
                <h5 class="mb-5 text-lg font-medium text-dark dark:text-white">
                  Features
                </h5>
                <div class="flex flex-col gap-[14px]">
                  <p class="text-base text-body-color dark:text-dark-6">
                    Up to 1 User
                  </p>
                  <p class="text-base text-body-color dark:text-dark-6">
                    All UI components
                  </p>
                  <p class="text-base text-body-color dark:text-dark-6">
                    Lifetime access
                  </p>
                  <p class="text-base text-body-color dark:text-dark-6">
                    Free updates
                  </p>
                </div>
              </div>
              <a

                class="inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark"
              >
                Purchase Now
              </a>
            </div>
          </div>
          <div class="w-full px-4 md:w-1/2 lg:w-1/3">
            <div
              class="relative z-10 mb-10 overflow-hidden rounded-xl bg-white px-8 py-10 shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14"
            >
              <p
                class="absolute right-[-50px] top-[60px] inline-block -rotate-90 rounded-bl-md rounded-tl-md bg-primary px-5 py-2 text-base font-medium text-white"
              >
                Recommended
              </p>
              <span
                class="mb-5 block text-xl font-medium text-dark dark:text-white"
              >
                Basic
              </span>
              <h2
                class="mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]"
              >
                <span class="text-xl font-medium">$</span>
                <span class="-ml-1 -tracking-[2px]">59.00</span>
                <span
                  class="text-base font-normal text-body-color dark:text-dark-6"
                >
                  Per Month
                </span>
              </h2>
              <div class="mb-[50px]">
                <h5 class="mb-5 text-lg font-medium text-dark dark:text-white">
                  Features
                </h5>
                <div class="flex flex-col gap-[14px]">
                  <p class="text-base text-body-color dark:text-dark-6">
                    Up to 1 User
                  </p>
                  <p class="text-base text-body-color dark:text-dark-6">
                    All UI components
                  </p>
                  <p class="text-base text-body-color dark:text-dark-6">
                    Lifetime access
                  </p>
                  <p class="text-base text-body-color dark:text-dark-6">
                    Free updates
                  </p>
                </div>
              </div>
              <a

                class="inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark"
              >
                Purchase Now
              </a>
            </div>
          </div>
          <div class="w-full px-4 md:w-1/2 lg:w-1/3">
            <div
              class="relative z-10 mb-10 overflow-hidden rounded-xl bg-white px-8 py-10 shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14"
            >
              <span
                class="mb-5 block text-xl font-medium text-dark dark:text-white"
              >
                Premium
              </span>
              <h2
                class="mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]"
              >
                <span class="text-xl font-medium">$</span>
                <span class="-ml-1 -tracking-[2px]">99.00</span>
                <span
                  class="text-base font-normal text-body-color dark:text-dark-6"
                >
                  Per Month
                </span>
              </h2>
              <div class="mb-[50px]">
                <h5 class="mb-5 text-lg font-medium text-dark dark:text-white">
                  Features
                </h5>
                <div class="flex flex-col gap-[14px]">
                  <p class="text-base text-body-color dark:text-dark-6">
                    Up to 1 User
                  </p>
                  <p class="text-base text-body-color dark:text-dark-6">
                    All UI components
                  </p>
                  <p class="text-base text-body-color dark:text-dark-6">
                    Lifetime access
                  </p>
                  <p class="text-base text-body-color dark:text-dark-6">
                    Free updates
                  </p>
                </div>
              </div>
              <a

                class="inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark"
              >
                Purchase Now
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
    {/* <!-- ====== Pricing Section End --> */}

</>
}