<section className="flex min-h-screen place-content-center items-center p-10">
  <div
    className="mx-auto mt-12 grid w-full grid-cols-3 rounded-md lg:grid-cols-4 lg:bg-card-background lg:px-10 lg:pb-10"
  >
    <div className="col-span-3 grid gap-3 lg:col-start-2 lg:grid-cols-3 lg:gap-0">
      <div
        className="relative mx-auto h-fit w-full overflow-hidden rounded-2xl bg-card-background py-10 max-lg:max-w-sm max-lg:px-4 lg:h-full lg:rounded-b-none"
      >
        <div className="relative h-full p-px lg:pb-0">
          <div
            className="relative z-10 flex h-full flex-col overflow-hidden rounded-[calc(1rem-1px)] lg:rounded-b-none"
          >
            <div
              className="mx-auto flex h-full w-full max-w-[20rem] flex-col px-6 pb-6"
            >
              <div className="flex w-full justify-between pt-6">
                <h3 className="text-lg font-semibold">Basic</h3>
              </div>
              <div className="pt-3">
                <p className="opacity-90">For small businesses</p>
                <p className="mt-3 font-semibold"></p>
                <div className="">
                  <span className="text-5xl font-semibold">$11 </span>
                  <span className="text-3xl">/mo</span>
                  <br />
                  <p className="mt-1 text-sm font-normal opacity-70">
                    (paid monthly)
                  </p>
                </div>
                <div className="hidden">
                  <span className="text-5xl font-semibold">$9 </span>
                  <span className="text-3xl">/mo</span>
                  <br />
                  <p className="mt-1 text-sm font-normal opacity-70">
                    (paid yearly)
                  </p>
                </div>
              </div>
              <ul className="mt-6 flex w-full flex-col gap-2 lg:sr-only">
                <li className="flex items-start opacity-90">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline"> Integrations <span></span> </span>
                </li>
                <li className="flex items-start opacity-90">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    Connect to your database <span></span>
                  </span>
                </li>
                <li className="flex items-start opacity-90">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    Data Storage
                    <span>
                      <span className="-300 text-base-700 ml-1 text-sm">
                        (Up to 5 GB)
                      </span>
                    </span>
                  </span>
                </li>
                <li className="flex items-start opacity-90">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline"> Basic reports <span></span> </span>
                </li>
                <li className="flex items-start opacity-90">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline"> Email support <span></span> </span>
                </li>
              </ul>
              <div className="mt-8">
                <a
                  className="block w-full rounded-md bg-primary py-3 text-center font-medium text-primary-foreground"
                  href="#"
                >
                  Get Started
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        className="relative mx-auto h-fit w-full overflow-hidden rounded-2xl py-10 text-primary-foreground max-lg:max-w-sm max-lg:bg-gradient-to-br max-lg:from-primary max-lg:to-secondary max-lg:to-80% max-lg:px-4 lg:h-full lg:rounded-b-none lg:bg-primary"
      >
        <div className="relative h-full p-px lg:pb-0">
          <div
            className="-800 relative z-10 flex h-full flex-col overflow-hidden rounded-[calc(1rem-1px)] text-primary-foreground lg:rounded-b-none"
          >
            <div
              className="bg-primary-300/40 -600/20 absolute left-0 top-0 -z-10 mx-auto aspect-square w-[80%] -translate-x-1/2 -translate-y-1/2 rounded-full blur-3xl"
              aria-hidden="true"
            ></div>
            <div
              className="mx-auto flex h-full w-full max-w-[20rem] flex-col px-6 pb-6"
            >
              <div className="flex w-full justify-between pt-6">
                <h3 className="main-text-gradient text-lg font-semibold">
                  Professional
                </h3>
                <div className="flex w-full items-center justify-end">
                  <div
                    className="flex gap-2 rounded-full bg-background px-3 py-1 text-sm text-foreground"
                  >
                    <p className="flex items-center whitespace-nowrap">Popular</p>
                  </div>
                </div>
              </div>
              <div className="pt-3">
                <p className="opacity-90">For growing businesses</p>
                <p className="mt-3 font-semibold"></p>
                <div className="">
                  <span className="text-5xl font-semibold">$59 </span>
                  <span className="text-3xl">/mo</span>
                  <br />
                  <p className="mt-1 text-sm font-normal opacity-70">
                    (paid monthly)
                  </p>
                </div>
                <div className="hidden">
                  <span className="text-5xl font-semibold">$49 </span>
                  <span className="text-3xl">/mo</span>
                  <br />
                  <p className="mt-1 text-sm font-normal opacity-70">
                    (paid yearly)
                  </p>
                </div>
              </div>
              <ul className="mt-6 flex w-full flex-col gap-2 lg:sr-only">
                <li className="flex items-start">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline"> Integrations <span></span> </span>
                </li>
                <li className="flex items-start">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    Connect to your database <span></span>
                  </span>
                </li>
                <li className="flex items-start">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    Import and export data <span></span>
                  </span>
                </li>
                <li className="flex items-start">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    Team members
                    <span>
                      <span className="-300 text-base-700 ml-1 text-sm">
                        (Up to 5 users)
                      </span>
                    </span>
                  </span>
                </li>
                <li className="flex items-start">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    Data Storage
                    <span>
                      <span className="-300 text-base-700 ml-1 text-sm">
                        (Up to 50 GB)
                      </span>
                    </span>
                  </span>
                </li>
                <li className="flex items-start">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline"> Basic reports <span></span> </span>
                </li>
                <li className="flex items-start">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    Advanced analytics <span></span>
                  </span>
                </li>
                <li className="flex items-start">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    Professional reports <span></span>
                  </span>
                </li>
                <li className="flex items-start">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline"> Email support <span></span> </span>
                </li>
                <li className="flex items-start">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    Priority support <span></span>
                  </span>
                </li>
              </ul>
              <div className="mt-8 w-full">
                <a
                  className="block w-full rounded-md bg-background py-3 text-center font-medium text-foreground"
                  href="#"
                >
                  Get Started
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        className="relative mx-auto h-fit w-full overflow-hidden rounded-2xl bg-card-background py-10 max-lg:max-w-sm max-lg:px-4 lg:h-full lg:rounded-b-none"
      >
        <div className="relative h-full p-px lg:pb-0">
          <div
            className="relative z-10 flex h-full flex-col overflow-hidden rounded-[calc(1rem-1px)] lg:rounded-b-none"
          >
            <div
              className="mx-auto flex h-full w-full max-w-[20rem] flex-col px-6 pb-6"
            >
              <div className="flex w-full justify-between pt-6">
                <h3 className="text-lg font-semibold">Enterprise</h3>
              </div>
              <div className="pt-3">
                <p className="opacity-90">For next level companies</p>
                <p className="mt-3 font-semibold"></p>
                <div className="">
                  <span className="text-5xl font-semibold">$119 </span>
                  <span className="text-3xl">/mo</span>
                  <br />
                  <p className="mt-1 text-sm font-normal opacity-70">
                    (paid monthly)
                  </p>
                </div>
                <div className="hidden">
                  <span className="text-5xl font-semibold">$99 </span>
                  <span className="text-3xl">/mo</span>
                  <br />
                  <p className="mt-1 text-sm font-normal opacity-70">
                    (paid yearly)
                  </p>
                </div>
              </div>
              <ul className="mt-6 flex w-full flex-col gap-2 lg:sr-only">
                <li className="flex items-start opacity-90">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline"> Integrations <span></span> </span>
                </li>
                <li className="flex items-start opacity-90">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    Connect to your database <span></span>
                  </span>
                </li>
                <li className="flex items-start opacity-90">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    Import and export data <span></span>
                  </span>
                </li>
                <li className="flex items-start opacity-90">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    Team members
                    <span>
                      <span className="-300 text-base-700 ml-1 text-sm">
                        (Up to 20 users)
                      </span>
                    </span>
                  </span>
                </li>
                <li className="flex items-start opacity-90">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    Data Storage
                    <span>
                      <span className="-300 text-base-700 ml-1 text-sm">
                        (Unlimited)
                      </span>
                    </span>
                  </span>
                </li>
                <li className="flex items-start opacity-90">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline"> Basic reports <span></span> </span>
                </li>
                <li className="flex items-start opacity-90">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    Advanced analytics <span></span>
                  </span>
                </li>
                <li className="flex items-start opacity-90">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    Professional reports <span></span>
                  </span>
                </li>
                <li className="flex items-start opacity-90">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    Custom reports <span></span>
                  </span>
                </li>
                <li className="flex items-start opacity-90">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline"> Email support <span></span> </span>
                </li>
                <li className="flex items-start opacity-90">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    Priority support <span></span>
                  </span>
                </li>
                <li className="flex items-start opacity-90">
                  <svg
                    className="mt-0.5 h-5 w-5 shrink-0 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <path d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="m5 12 5 5L20 7"></path>
                  </svg>
                  <span className="ml-2 inline">
                    White-glove onboarding <span></span>
                  </span>
                </li>
              </ul>
              <div className="mt-8">
                <a
                  className="block w-full rounded-md bg-primary py-3 text-center font-medium text-primary-foreground"
                  href="#"
                >
                  Get Started
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div role="table" className="col-span-4 hidden lg:block">
      <div>
        <div
          role="row"
          className="grid grid-cols-4 border-b border-foreground/5 text-lg"
        >
          <p className="pb-2 pt-8 font-semibold">Lorem</p>
          <div className=""></div>
          <div className="bg-primary text-primary-foreground"></div>
          <div className=""></div>
        </div>

        <div role="row" className="grid grid-cols-4 border-b border-foreground/5">
          <p className="py-2 opacity-90">Lorem</p>
          <div className="flex items-center justify-center py-2">
            <svg
              className="opcaity-90 h-5 w-5 shrink-0 text-primary"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
          <div
            className="flex items-center justify-center bg-primary py-2 text-primary-foreground"
          >
            <svg
              className="h-5 w-5 shrink-0 text-primary-foreground"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
          <div className="flex items-center justify-center py-2">
            <svg
              className="opcaity-90 h-5 w-5 shrink-0 text-primary"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
        </div>

        <div role="row" className="grid grid-cols-4 border-b border-foreground/5">
          <p className="py-2 opacity-90">Lorem Ipsum</p>
          <div className="flex items-center justify-center py-2">
            <svg
              className="opcaity-90 h-5 w-5 shrink-0 text-primary"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
          <div
            className="flex items-center justify-center bg-primary py-2 text-primary-foreground"
          >
            <svg
              className="h-5 w-5 shrink-0 text-primary-foreground"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
          <div className="flex items-center justify-center py-2">
            <svg
              className="opcaity-90 h-5 w-5 shrink-0 text-primary"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
        </div>

        <div role="row" className="grid grid-cols-4 border-b border-foreground/5">
          <p className="py-2 opacity-90">Lorem</p>
          <div className="flex items-center justify-center py-2">
            <svg
              className="h-5 w-5 shrink-0 opacity-90"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="M5 12h14"></path>
            </svg>
          </div>
          <div
            className="flex items-center justify-center bg-primary py-2 text-primary-foreground"
          >
            <svg
              className="h-5 w-5 shrink-0 text-primary-foreground"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
          <div className="flex items-center justify-center py-2">
            <svg
              className="opcaity-90 h-5 w-5 shrink-0 text-primary"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
        </div>

        <div role="row" className="grid grid-cols-4 border-b border-foreground/5">
          <p className="py-2 opacity-90">Lorem</p>
          <div className="flex items-center justify-center py-2">
            <svg
              className="h-5 w-5 shrink-0 opacity-90"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="M5 12h14"></path>
            </svg>
          </div>
          <div
            className="flex items-center justify-center bg-primary py-2 text-primary-foreground"
          >
            <span className="">Up to 5 users</span>
          </div>
          <div className="flex items-center justify-center py-2">
            <span className="opacity-90">Up to 20 users</span>
          </div>
        </div>

        <div role="row" className="grid grid-cols-4 border-b border-foreground/5">
          <p className="py-2 opacity-90">Lorem</p>
          <div className="flex items-center justify-center py-2">
            <span className="opacity-90">Up to 5 GB</span>
          </div>
          <div
            className="flex items-center justify-center bg-primary py-2 text-primary-foreground"
          >
            <span className="">Up to 50 GB</span>
          </div>
          <div className="flex items-center justify-center py-2">
            <span className="opacity-90">Unlimited</span>
          </div>
        </div>
      </div>

      <div>
        <div
          role="row"
          className="grid grid-cols-4 border-b border-foreground/5 text-lg"
        >
          <p className="pb-2 pt-8 font-semibold">Lorem</p>
          <div className=""></div>
          <div className="bg-primary text-primary-foreground"></div>
          <div className=""></div>
        </div>
        <div role="row" className="grid grid-cols-4 border-b border-foreground/5">
          <p className="py-2 opacity-90">Lorem</p>
          <div className="flex items-center justify-center py-2">
            <svg
              className="opcaity-90 h-5 w-5 shrink-0 text-primary"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
          <div
            className="flex items-center justify-center bg-primary py-2 text-primary-foreground"
          >
            <svg
              className="h-5 w-5 shrink-0 text-primary-foreground"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
          <div className="flex items-center justify-center py-2">
            <svg
              className="opcaity-90 h-5 w-5 shrink-0 text-primary"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
        </div>
        <div role="row" className="grid grid-cols-4 border-b border-foreground/5">
          <p className="py-2 opacity-90">Lorem</p>
          <div className="flex items-center justify-center py-2">
            <svg
              className="h-5 w-5 shrink-0 opacity-90"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="M5 12h14"></path>
            </svg>
          </div>
          <div
            className="flex items-center justify-center bg-primary py-2 text-primary-foreground"
          >
            <svg
              className="h-5 w-5 shrink-0 text-primary-foreground"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
          <div className="flex items-center justify-center py-2">
            <svg
              className="opcaity-90 h-5 w-5 shrink-0 text-primary"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
        </div>
        <div role="row" className="grid grid-cols-4 border-b border-foreground/5">
          <p className="py-2 opacity-90">Lorem</p>
          <div className="flex items-center justify-center py-2">
            <svg
              className="h-5 w-5 shrink-0 opacity-90"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="M5 12h14"></path>
            </svg>
          </div>
          <div
            className="flex items-center justify-center bg-primary py-2 text-primary-foreground"
          >
            <svg
              className="h-5 w-5 shrink-0 text-primary-foreground"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
          <div className="flex items-center justify-center py-2">
            <svg
              className="opcaity-90 h-5 w-5 shrink-0 text-primary"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
        </div>
        <div role="row" className="grid grid-cols-4 border-b border-foreground/5">
          <p className="py-2 opacity-90">Lorem</p>
          <div className="flex items-center justify-center py-2">
            <svg
              className="h-5 w-5 shrink-0 opacity-90"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="M5 12h14"></path>
            </svg>
          </div>
          <div
            className="flex items-center justify-center bg-primary py-2 text-primary-foreground"
          >
            <svg
              className="h-5 w-5 shrink-0 opacity-90"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="M5 12h14"></path>
            </svg>
          </div>
          <div className="flex items-center justify-center py-2">
            <svg
              className="opcaity-90 h-5 w-5 shrink-0 text-primary"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
        </div>
      </div>

      <div>
        <div
          role="row"
          className="grid grid-cols-4 border-b border-foreground/5 text-lg"
        >
          <p className="pb-2 pt-8 font-semibold">Lorem</p>
          <div className=""></div>
          <div className="bg-primary text-primary-foreground"></div>
          <div className=""></div>
        </div>
        <div role="row" className="grid grid-cols-4 border-b border-foreground/5">
          <p className="py-2 opacity-90">Lorem</p>
          <div className="flex items-center justify-center py-2">
            <svg
              className="opcaity-90 h-5 w-5 shrink-0 text-primary"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
          <div
            className="flex items-center justify-center bg-primary py-2 text-primary-foreground"
          >
            <svg
              className="h-5 w-5 shrink-0 text-primary-foreground"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
          <div className="flex items-center justify-center py-2">
            <svg
              className="opcaity-90 h-5 w-5 shrink-0 text-primary"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
        </div>
        <div role="row" className="grid grid-cols-4 border-b border-foreground/5">
          <p className="py-2 opacity-90">Lorem</p>
          <div className="flex items-center justify-center py-2">
            <svg
              className="h-5 w-5 shrink-0 opacity-90"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="M5 12h14"></path>
            </svg>
          </div>
          <div
            className="flex items-center justify-center bg-primary py-2 text-primary-foreground"
          >
            <svg
              className="h-5 w-5 shrink-0 text-primary-foreground"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
          <div className="flex items-center justify-center py-2">
            <svg
              className="opcaity-90 h-5 w-5 shrink-0 text-primary"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
        </div>
        <div role="row" className="grid grid-cols-4 border-b border-foreground/5">
          <p className="py-2 opacity-90">Lorem</p>
          <div className="flex items-center justify-center py-2">
            <svg
              className="h-5 w-5 shrink-0 opacity-90"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="M5 12h14"></path>
            </svg>
          </div>
          <div
            className="flex items-center justify-center rounded-b-2xl bg-primary py-2 text-primary-foreground"
          >
            <svg
              className="h-5 w-5 shrink-0 opacity-90"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="M5 12h14"></path>
            </svg>
          </div>
          <div className="flex items-center justify-center py-2">
            <svg
              className="opcaity-90 h-5 w-5 shrink-0 text-primary"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              aria-hidden="true"
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <path d="m5 12 5 5L20 7"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
#Colorful Pricing

#Pricing with Features

#Pricing with Gradient

#Pricing with Top Border and Popular
