What layouts are included?

Side-by-side two-tier and three-tier cards, a version with a highlighted popular plan, monthly/annual toggle, a full comparison table, and single-plan CTA cards.

How does the billing toggle work?

When you click the toggle it swaps the prices between monthly and annual. The vanilla JavaScript for that is already included in the component, just copy the full snippet and it works as is.

Yes. Three-column tier cards stack to a single column on mobile.

Pricing Sections

Ready to use Tailwind CSS pricing section components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.

A pricing section has one job: make it obvious what someone gets and make it easy to pick a plan. We have a decent range here, two or three tier side-by-side cards, a highlighted "most popular" plan, a monthly/annual toggle that switches the prices, feature comparison tables, and a simple single-plan block for when you only have one thing to sell. They're all Tailwind CSS and fully responsive.

Tailwind

Single pricing

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-4xl text-center">
          <h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Pricing plan</h2>
          <p class="mx-auto mt-6 w-full max-w-2xl text-pretty text-xl leading-8 text-gray-600">Select from best plans, ensuring a perfect match. Need more or less? Customize your subscription for a seamless fit!</p>
        </div>
        <div class="mx-auto mt-16 max-w-2xl rounded-3xl ring-1 ring-gray-200 sm:mt-20 lg:mx-0 lg:flex lg:max-w-none lg:items-center lg:gap-x-20 lg:ring-0">
          <div class="p-2 lg:w-full lg:max-w-sm lg:shrink-0 lg:p-0">
            <div class="rounded-2xl bg-gray-50 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:py-16">
              <div class="mx-auto max-w-xs px-8">
                <p class="text-5xl font-semibold tracking-tight text-gray-900">$49.99</p>
                <h3 id="package-premium" class="mt-4 text-lg font-medium text-gray-900">Premium package</h3>
                <div class="mt-8 h-px bg-gray-900/5"></div>
                <p class="mt-8 text-sm leading-6 text-gray-600">Empowering your brand with standout visuals that leave an impact</p>
                <a href="#" aria-describedby="package-premium" class="mt-8 block rounded-md bg-pink-500 px-3 py-2.5 text-center text-base font-medium tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
              </div>
            </div>
          </div>
          <div class="-mt-2 p-8 sm:p-10 lg:mt-0 lg:flex-auto lg:p-0">
            <p class="text-4xl font-semibold tracking-tight text-gray-900">Process</p>
            <p class="mt-2 text-sm leading-6 text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            <ul class="mt-10 *:border-b *:border-gray-100 *:py-6">
              <li class="flex gap-x-3 first:pt-0 last:border-0 last:pb-0 sm:gap-x-6">
                <svg class="mt-2 h-5 w-5 flex-none text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm leading-6 text-gray-600">
                  <span class="font-semibold text-gray-900">Discovery Session</span>
                  – We delve deep into understanding your brand’s core values, goals, and target audience. Our aim is to align your brand’s identity with its visual representation.
                </p>
              </li>
              <li class="flex gap-x-3 first:pt-0 last:border-0 last:pb-0 sm:gap-x-6">
                <svg class="mt-2 h-5 w-5 flex-none text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm leading-6 text-gray-600">
                  <span class="font-semibold text-gray-900">Custom Design Concepts</span>
                  – Receive three unique design concepts tailored to your brand, with opportunities for refinement and feedback to ensure the perfect fit.
                </p>
              </li>
              <li class="flex gap-x-3 first:pt-0 last:border-0 last:pb-0 sm:gap-x-6">
                <svg class="mt-2 h-5 w-5 flex-none text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm leading-6 text-gray-600">
                  <span class="font-semibold text-gray-900">Deliverables</span>
                  – All final design files will be provided, including various formats suitable for both digital and print use. We ensure your brand assets are ready for immediate implementation.
                </p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

Two tiers

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-4xl text-center">
          <h2 class="text-base font-semibold text-pink-500">Pricing</h2>
          <p class="mt-3 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Choose your right plan!</p>
          <p class="mx-auto mt-6 w-full max-w-2xl text-pretty text-xl leading-8 text-gray-600">Select from best plans, ensuring a perfect match. Need more or less? Customize your subscription for a seamless fit!</p>
        </div>
        <div class="mx-auto mt-16 grid w-full max-w-md grid-cols-1 gap-8 lg:max-w-4xl lg:grid-cols-2">
          <div class="flex flex-col items-start rounded-2xl bg-white p-8 ring-1 ring-gray-200">
            <h3 id="tier-free" class="text-lg font-medium text-pink-500">Free</h3>
            <p class="mt-4 text-base text-gray-600">Essential project tools for individuals and freelancers.</p>
            <p class="mt-6 flex items-baseline gap-x-2">
              <span class="text-5xl font-semibold tracking-tight text-gray-900">$0</span>
            </p>
            <ul role="list" class="mt-10 space-y-4">
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">5 GB Secure Data Storage</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Basic Performance Analytics</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Community Support Access</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Single User Access</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Standard Security Measures</p>
              </li>
            </ul>
            <div class="mt-auto w-full">
              <a href="#" aria-describedby="tier-free" class="mt-10 block rounded-md px-3 py-2.5 text-center text-base font-medium tracking-tight text-pink-500 ring-1 ring-inset ring-pink-200 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
            </div>
          </div>
          <div class="flex flex-col items-start rounded-2xl bg-white p-8 ring-2 ring-pink-500">
            <h3 id="tier-business" class="text-lg font-medium text-pink-500">Business</h3>
            <p class="mt-4 text-base text-gray-600">Advanced project tools for individuals and companies.</p>
            <p class="mt-6 flex items-baseline gap-x-2">
              <span class="text-5xl font-semibold tracking-tight text-gray-900">$79</span>
              <span class="text-base font-medium text-gray-600">/month</span>
            </p>
            <ul role="list" class="mt-10 space-y-4">
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Unlimited Cloud Storage</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Comprehensive Analytics Suite</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Dedicated Customer Support</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Team Collaboration Tools</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Up to 50 Users</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Premium Security Protocols</p>
              </li>
            </ul>
            <div class="mt-auto w-full">
              <a href="#" aria-describedby="tier-business" class="mt-10 block rounded-md bg-pink-500 px-3 py-2.5 text-center text-base font-medium tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
            </div>
          </div>
        </div>
      </div>
    </div>

Two tiers with highlighted tier

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-4xl text-center">
          <h2 class="text-base font-semibold text-pink-500">Pricing</h2>
          <p class="mt-3 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Choose your right plan!</p>
          <p class="mx-auto mt-6 w-full max-w-2xl text-pretty text-xl leading-8 text-gray-600">Select from best plans, ensuring a perfect match. Need more or less? Customize your subscription for a seamless fit!</p>
        </div>
        <div class="mx-auto mt-16 grid w-full max-w-md grid-cols-1 gap-8 lg:max-w-4xl lg:grid-cols-2">
          <div class="flex flex-col rounded-2xl bg-white p-8 ring-1 ring-gray-200 md:p-10">
            <h3 id="tier-pro" class="text-3xl font-semibold tracking-tight text-gray-900">Pro</h3>
            <p class="mt-4 text-base text-gray-600">Ideal for individuals and small teams seeking seamless collaboration.</p>
            <p class="mt-6 flex items-baseline gap-x-1">
              <span id="basic-price" class="text-5xl font-semibold tracking-tight text-gray-900">$30</span>
              <span class="text-sm font-medium text-gray-600">/month</span>
            </p>
            <div class="mt-6 h-px w-full bg-gray-100"></div>
            <ul role="list" class="mt-6 space-y-4">
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">100 GB Encrypted Storage</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Advanced Business Analytics</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Comprehensive Project Management</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Priority Email & Chat Support</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Team Collaboration Features</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Up to 10 Users</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Enhanced Security Protocols</p>
              </li>
            </ul>
            <div class="mt-auto">
              <a href="#" aria-describedby="tier-pro" class="mt-9 block rounded-md px-3 py-2.5 text-center text-base font-medium tracking-tight text-pink-500 ring-1 ring-inset ring-pink-200 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
            </div>
          </div>
          <div class="relative flex flex-col overflow-clip rounded-2xl bg-white p-8 ring-1 ring-gray-200 md:p-10">
            <div class="absolute left-0 top-0 h-full w-full">
              <div class="absolute right-0 top-0 h-[112%] w-[126%] bg-gradient-to-br from-pink-200 from-15% to-white to-85% ring-1 ring-pink-500/25" style="border-bottom-left-radius: 71% 60%"></div>
              <div class="absolute -left-[3%] bottom-[3%] z-10 aspect-[1/2] w-full min-w-[432px] rounded-e-full bg-gradient-to-bl from-pink-500/20 from-20% to-transparent to-80% ring-1 ring-pink-500/25"></div>
            </div>
            <div class="z-10">
              <h3 id="tier-business" class="text-3xl font-semibold tracking-tight text-gray-900">Business</h3>
              <p class="mt-4 text-base text-gray-600">Ideal for growing businesses seeking advanced features.</p>
              <p class="mt-6 flex items-baseline gap-x-1">
                <span id="basic-price" class="text-5xl font-semibold tracking-tight text-gray-900">$100</span>
                <span class="text-sm font-medium text-gray-600">/month</span>
              </p>
              <div class="mt-6 h-px w-full bg-gray-100"></div>
              <ul role="list" class="mt-6 space-y-4">
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <g id="Complete">
                      <g id="tick">
                        <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                      </g>
                    </g>
                  </svg>
                  <p class="text-sm text-gray-600">Unlimited Cloud Storage Capacity</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <g id="Complete">
                      <g id="tick">
                        <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                      </g>
                    </g>
                  </svg>
                  <p class="text-sm text-gray-600">Extensive Data Analytics Suite</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <g id="Complete">
                      <g id="tick">
                        <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                      </g>
                    </g>
                  </svg>
                  <p class="text-sm text-gray-600">Robust Project Management Tools</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <g id="Complete">
                      <g id="tick">
                        <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                      </g>
                    </g>
                  </svg>
                  <p class="text-sm text-gray-600">Dedicated Account Management</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <g id="Complete">
                      <g id="tick">
                        <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                      </g>
                    </g>
                  </svg>
                  <p class="text-sm text-gray-600">24/7 Phone Support Service</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <g id="Complete">
                      <g id="tick">
                        <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                      </g>
                    </g>
                  </svg>
                  <p class="text-sm text-gray-600">Advanced Collaboration Capabilities</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <g id="Complete">
                      <g id="tick">
                        <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                      </g>
                    </g>
                  </svg>
                  <p class="text-sm text-gray-600">API Integration Access</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <g id="Complete">
                      <g id="tick">
                        <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                      </g>
                    </g>
                  </svg>
                  <p class="text-sm text-gray-600">Custom Security Solutions</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <g id="Complete">
                      <g id="tick">
                        <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                      </g>
                    </g>
                  </svg>
                  <p class="text-sm text-gray-600">Unlimited Users</p>
                </li>
              </ul>
              <div class="mt-auto">
                <a href="#" aria-describedby="tier-business" class="mt-9 block rounded-md bg-gray-800 px-3 py-2.5 text-center text-base font-medium tracking-tight text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">Get started</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Three tiers

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl lg:max-w-4xl lg:mx-0">
          <h2 class="text-base font-semibold text-pink-500">Pricing</h2>
          <p class="mt-3 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Let's skyrocket your business</p>
          <p class="mt-6 w-full max-w-2xl text-pretty text-xl leading-8 text-gray-600">Select from best plans, ensuring a perfect match. Need more or less? Customize your subscription for a seamless fit!</p>
        </div>
        <div class="mx-auto mt-16 grid w-full max-w-md grid-cols-1 gap-8 lg:max-w-full lg:grid-cols-3">
          <div class="flex flex-col rounded-2xl px-5 py-8 ring-1 ring-gray-200">
            <h3 id="tier-basic" class="text-3xl font-semibold tracking-tight text-gray-900">Basic</h3>
            <div class="mt-7 flex items-center gap-x-2">
              <div class="text-xs uppercase text-gray-600">Details</div>
              <div class="h-px flex-auto bg-gray-100"></div>
            </div>
            <ul role="list" class="mt-5 space-y-4">
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">10 GB Storage</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">24/7 Email Support</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Basic Analytics</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Up to 3 Users</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Standard Security</p>
              </li>
            </ul>
            <div class="mt-auto">
              <div class="mt-14 h-px bg-gray-100"></div>
              <div class="mt-7 flex items-end justify-between">
                <p class="flex items-baseline gap-x-1">
                  <span class="text-3xl font-semibold text-gray-900">$10</span>
                  <span class="text-sm font-normal text-gray-600">/month</span>
                </p>
                <div>
                  <a href="#" aria-describedby="tier-basic" class="block rounded-md px-6 py-2 text-sm font-semibold text-pink-500 ring-1 ring-inset ring-pink-200 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Subscribe</a>
                </div>
              </div>
            </div>
          </div>
          <div class="flex flex-col rounded-2xl px-5 py-8 ring-2 ring-pink-500">
            <h3 id="tier-pro" class="text-3xl font-semibold tracking-tight text-pink-500">Pro</h3>
            <div class="mt-7 flex items-center gap-x-2">
              <div class="text-xs uppercase text-gray-600">Details</div>
              <div class="h-px flex-auto bg-gray-100"></div>
            </div>
            <ul role="list" class="mt-5 space-y-4">
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">100 GB Storage</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Priority Email & Chat Support</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Advanced Analytics</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Up to 10 Users</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Enhanced Security</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Customizable Dashboard</p>
              </li>
            </ul>
            <div class="mt-auto">
              <div class="mt-14 h-px bg-gray-100"></div>
              <div class="mt-7 flex items-end justify-between">
                <p class="flex items-baseline gap-x-1">
                  <span class="text-3xl font-semibold text-gray-900">$30</span>
                  <span class="text-sm font-normal text-gray-600">/month</span>
                </p>
                <div>
                  <a href="#" aria-describedby="tier-pro" class="block rounded-md bg-pink-500 px-6 py-2 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Subscribe</a>
                </div>
              </div>
            </div>
          </div>
          <div class="flex flex-col rounded-2xl px-5 py-8 ring-1 ring-gray-200">
            <h3 id="tier-enterprise" class="text-3xl font-semibold tracking-tight text-gray-900">Enterprise</h3>
            <div class="mt-7 flex items-center gap-x-2">
              <div class="text-xs uppercase text-gray-600">Details</div>
              <div class="h-px flex-auto bg-gray-100"></div>
            </div>
            <ul role="list" class="mt-5 space-y-4">
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Unlimited Storage</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Dedicated Account Manager</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Comprehensive Analytics</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Unlimited Users</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Premium Security</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">API Access</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Custom Integrations</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">24/7 Phone Support</p>
              </li>
            </ul>
            <div class="mt-auto">
              <div class="mt-14 h-px bg-gray-100"></div>
              <div class="mt-7 flex items-end justify-between">
                <p class="text-3xl font-semibold text-gray-900">Custom</p>
                <div>
                  <a href="#" aria-describedby="tier-enterprise" class="block rounded-md px-6 py-2 text-sm font-semibold text-pink-500 ring-1 ring-inset ring-pink-200 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Contact</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Three tiers with toggle

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-4xl text-center">
          <h2 class="text-base font-semibold text-pink-500">Pricing</h2>
          <p class="mt-3 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Choose the perfect plan</p>
          <p class="mx-auto mt-6 w-full max-w-2xl text-pretty text-xl leading-8 text-gray-600">Select from best plans, ensuring a perfect match. Need more or less? Customize your subscription for a seamless fit!</p>
        </div>
        <div class="mt-16">
          <div class="flex justify-center">
            <div class="flex items-center gap-1 rounded-lg bg-gray-50 p-1 ring-1 ring-gray-200">
              <button id="monthly-pricing-button" aria-label="Show monthly options" aria-pressed="true" class="cursor-pointer rounded-md bg-transparent px-4 py-1.5 text-sm font-medium text-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-600 aria-pressed:bg-white aria-pressed:text-gray-900 aria-pressed:shadow">Monthly</button>
              <button id="annual-pricing-button" aria-label="Show annual options" aria-pressed="false" class="cursor-pointer rounded-md bg-transparent px-4 py-1.5 text-sm font-medium text-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-600 aria-pressed:bg-white aria-pressed:text-gray-900 aria-pressed:shadow">Annual</button>
            </div>
          </div>
        </div>
        <div class="mx-auto mt-10 grid w-full max-w-md grid-cols-1 gap-8 lg:max-w-full lg:grid-cols-3">
          <div class="rounded-2xl p-8 ring-1 ring-gray-200 lg:rounded-none lg:p-0 lg:ring-0">
            <div class="space-y-6 lg:rounded-2xl lg:p-8 lg:ring-1 lg:ring-gray-200">
              <h3 id="tier-freelancer" class="text-xl font-medium tracking-tight text-gray-900">Freelancer</h3>
              <p class="flex items-baseline gap-x-2">
                <span id="freelancer-price" class="text-5xl font-semibold tracking-tight text-gray-900">$29</span>
                <span class="text-base font-medium text-gray-600">/month</span>
              </p>
              <p class="text-base text-gray-600">Ideal for individuals and small teams seeking seamless collaboration.</p>
              <a href="#" aria-describedby="tier-freelancer" class="block rounded-md px-3 py-2.5 text-center text-base font-medium tracking-tight text-pink-500 ring-1 ring-inset ring-pink-200 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
            </div>
            <div class="mt-8">
              <p class="text-lg font-medium text-gray-900">What's included</p>
              <ul role="list" class="mt-5 space-y-3.5">
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">10 GB Secure Data Storage</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">Basic Performance Analytics</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">Project Management Tools</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">Community Support Access</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">Single User Access</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">Standard Data Security Measures</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="rounded-2xl p-8 ring-1 ring-gray-200 lg:rounded-none lg:p-0 lg:ring-0">
            <div class="space-y-6 lg:rounded-2xl lg:p-8 lg:ring-1 lg:ring-gray-200">
              <h3 id="tier-startup" class="text-xl font-medium tracking-tight text-gray-900">Startup</h3>
              <p class="flex items-baseline gap-x-2">
                <span id="startup-price" class="text-5xl font-semibold tracking-tight text-gray-900">$99</span>
                <span class="text-base font-medium text-gray-600">/month</span>
              </p>
              <p class="text-base text-gray-600">Ideal for growing businesses seeking advanced features.</p>
              <a href="#" aria-describedby="tier-startup" class="block rounded-md px-3 py-2.5 text-center text-base font-medium tracking-tight text-pink-500 ring-1 ring-inset ring-pink-200 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
            </div>
            <div class="mt-8">
              <p class="text-lg font-medium text-gray-900">What's included</p>
              <ul role="list" class="mt-5 space-y-3.5">
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">100 GB Encrypted Storage</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">Advanced Business Analytics</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">Comprehensive Project Management</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">Priority Email & Chat Support</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">Up to 10 Users</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">Enhanced Security Protocols</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">Team Collaboration Features</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="rounded-2xl p-8 ring-1 ring-gray-200 lg:rounded-none lg:p-0 lg:ring-0">
            <div class="space-y-6 lg:rounded-2xl lg:p-8 lg:ring-1 lg:ring-gray-200">
              <h3 id="tier-enterprise" class="text-xl font-medium tracking-tight text-pink-500">Enterprise</h3>
              <p class="flex items-baseline gap-x-2">
                <span class="text-5xl font-semibold tracking-tight text-gray-900">Custom</span>
              </p>
              <p class="text-base text-gray-600">Best for large organizations needing comprehensive solutions.</p>
              <a href="#" aria-describedby="tier-enterprise" class="block rounded-md bg-pink-500 px-3 py-2.5 text-center text-base font-medium tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Contact</a>
            </div>
            <div class="mt-8">
              <p class="text-lg font-medium text-gray-900">What's included</p>
              <ul role="list" class="mt-5 space-y-3.5">
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">Unlimited Cloud Storage Capacity</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">Extensive Data Analytics Suite</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">Robust Project Management Tools</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">Dedicated Account Management</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">24/7 Phone Support Service</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">Custom Security Solutions</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">Advanced Collaboration Capabilities</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-600">API Integration Access</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

const prices = {
          freelancer: { monthly: "$29", annual: "$282" },
          startup: { monthly: "$99", annual: "$979" },
        };

        const monthlyBtn = document.getElementById("monthly-pricing-button");
        const annualBtn = document.getElementById("annual-pricing-button");

        const updatePrices = (isMonthly) => {
          const period = isMonthly ? "monthly" : "annual";
          const unit = isMonthly ? "/month" : "/year";

          ["freelancer", "startup"].forEach((plan) => {
            const priceElement = document.getElementById(`${plan}-price`);
            priceElement.textContent = prices[plan][period];
            priceElement.nextElementSibling.textContent = unit;
          });

          monthlyBtn.setAttribute("aria-pressed", isMonthly);
          annualBtn.setAttribute("aria-pressed", !isMonthly);
        };

        monthlyBtn.addEventListener("click", () => updatePrices(true));
        annualBtn.addEventListener("click", () => updatePrices(false));

Three tiers with toggle on dark

<div class="bg-gray-900 py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-4xl text-center">
          <h2 class="text-base font-semibold text-pink-500">Pricing</h2>
          <p class="mt-3 text-4xl font-semibold tracking-tight text-white sm:text-5xl">Choose the perfect plans</p>
          <p class="mx-auto mt-6 w-full max-w-2xl text-pretty text-xl leading-8 text-gray-300">Select from best plans, ensuring a perfect match. Need more or less? Customize your subscription for a seamless fit!</p>
        </div>
        <div class="mt-16">
          <div class="flex justify-center">
            <div class="flex items-center gap-1 rounded-lg bg-white/5 p-1 ring-1 ring-white/15">
              <button id="monthly-pricing-button" aria-label="Show monthly options" aria-pressed="true" class="cursor-pointer rounded-md bg-transparent px-4 py-1.5 text-sm font-medium text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white aria-pressed:bg-gray-900 aria-pressed:text-white aria-pressed:shadow">Monthly</button>
              <button id="annual-pricing-button" aria-label="Show annual options" aria-pressed="false" class="cursor-pointer rounded-md bg-transparent px-4 py-1.5 text-sm font-medium text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white aria-pressed:bg-gray-900 aria-pressed:text-white aria-pressed:shadow">Annual</button>
            </div>
          </div>
        </div>
        <div class="mx-auto mt-10 grid w-full max-w-md grid-cols-1 gap-8 lg:max-w-full lg:grid-cols-3">
          <div class="rounded-2xl p-8 ring-1 ring-white/10 lg:rounded-none lg:p-0 lg:ring-0">
            <div class="space-y-6 lg:rounded-2xl lg:p-8 lg:ring-1 lg:ring-white/10">
              <h3 id="tier-freelancer" class="text-xl font-medium tracking-tight text-white">Freelancer</h3>
              <p class="flex items-baseline gap-x-2">
                <span id="freelancer-price" class="text-5xl font-medium tracking-tight text-white">$29</span>
                <span class="text-base font-medium text-gray-300">/month</span>
              </p>
              <p class="text-base text-gray-300">Ideal for individuals and small teams seeking seamless collaboration.</p>
              <a href="#" aria-describedby="tier-freelancer" class="block rounded-md bg-white/10 px-3 py-2.5 text-center text-base font-medium tracking-tight text-white hover:bg-white/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get started</a>
            </div>
            <div class="mt-8">
              <p class="text-lg font-medium text-white">What's included</p>
              <ul role="list" class="mt-5 space-y-3.5">
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">10 GB Secure Data Storage</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">Basic Performance Analytics</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">Project Management Tools</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">Community Support Access</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">Single User Access</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">Standard Data Security Measures</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="rounded-2xl p-8 ring-1 ring-white/10 lg:rounded-none lg:p-0 lg:ring-0">
            <div class="space-y-6 lg:rounded-2xl lg:p-8 lg:ring-1 lg:ring-white/10">
              <h3 id="tier-startup" class="text-xl font-medium tracking-tight text-white">Startup</h3>
              <p class="flex items-baseline gap-x-2">
                <span id="startup-price" class="text-5xl font-medium tracking-tight text-white">$99</span>
                <span class="text-base font-medium text-gray-300">/month</span>
              </p>
              <p class="text-base text-gray-300">Ideal for growing businesses seeking advanced features.</p>
              <a href="#" aria-describedby="tier-startup" class="block rounded-md bg-white/10 px-3 py-2.5 text-center text-base font-medium tracking-tight text-white hover:bg-white/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get started</a>
            </div>
            <div class="mt-8">
              <p class="text-lg font-medium text-white">What's included</p>
              <ul role="list" class="mt-5 space-y-3.5">
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">100 GB Encrypted Storage</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">Advanced Business Analytics</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">Comprehensive Project Management</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">Priority Email & Chat Support</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">Up to 10 Users</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">Enhanced Security Protocols</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">Team Collaboration Features</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="rounded-2xl bg-white/5 p-8 ring-2 ring-pink-500 lg:rounded-none lg:bg-transparent lg:p-0 lg:ring-0">
            <div class="space-y-6 lg:rounded-2xl lg:bg-white/5 lg:p-8 lg:ring-2 lg:ring-pink-500">
              <h3 id="tier-enterprise" class="text-xl font-medium tracking-tight text-white">Enterprise</h3>
              <p class="flex items-baseline gap-x-2">
                <span class="text-5xl font-medium tracking-tight text-white">Custom</span>
              </p>
              <p class="text-base text-gray-300">Best for large organizations needing comprehensive solutions.</p>
              <a href="#" aria-describedby="tier-enterprise" class="block rounded-md bg-pink-500 px-3 py-2.5 text-center text-base font-medium tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Contact</a>
            </div>
            <div class="mt-8">
              <p class="text-lg font-medium text-white">What's included</p>
              <ul role="list" class="mt-5 space-y-3.5">
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">Unlimited Cloud Storage Capacity</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">Extensive Data Analytics Suite</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">Robust Project Management Tools</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">Dedicated Account Management</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">24/7 Phone Support Service</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">Custom Security Solutions</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">Advanced Collaboration Capabilities</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor" />
                  </svg>
                  <p class="text-sm text-gray-300">API Integration Access</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

const prices = {
          freelancer: { monthly: "$29", annual: "$282" },
          startup: { monthly: "$99", annual: "$979" },
        };

        const monthlyBtn = document.getElementById("monthly-pricing-button");
        const annualBtn = document.getElementById("annual-pricing-button");

        const updatePrices = (isMonthly) => {
          const period = isMonthly ? "monthly" : "annual";
          const unit = isMonthly ? "/month" : "/year";

          ["freelancer", "startup"].forEach((plan) => {
            const priceElement = document.getElementById(`${plan}-price`);
            priceElement.textContent = prices[plan][period];
            priceElement.nextElementSibling.textContent = unit;
          });

          monthlyBtn.setAttribute("aria-pressed", isMonthly);
          annualBtn.setAttribute("aria-pressed", !isMonthly);
        };

        monthlyBtn.addEventListener("click", () => updatePrices(true));
        annualBtn.addEventListener("click", () => updatePrices(false));

Three tiers with toggle 2

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-4xl text-center">
          <h2 class="text-base font-semibold text-pink-500">Pricing</h2>
          <p class="mt-3 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Find the right plan</p>
          <p class="mx-auto mt-6 w-full max-w-2xl text-pretty text-xl leading-8 text-gray-600">Select from best plans, ensuring a perfect match. Need more or less? Customize your subscription for a seamless fit!</p>
        </div>
        <div class="mt-16">
          <div class="flex justify-center">
            <div class="flex items-center gap-1 rounded-lg bg-gray-50 p-1 ring-1 ring-gray-200">
              <button id="monthly-pricing-button" aria-label="Show monthly options" aria-pressed="true" class="cursor-pointer rounded-md bg-transparent px-4 py-1.5 text-sm font-medium text-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-600 aria-pressed:bg-white aria-pressed:text-gray-900 aria-pressed:shadow">Monthly</button>
              <button id="annual-pricing-button" aria-label="Show annual options" aria-pressed="false" class="cursor-pointer rounded-md bg-transparent px-4 py-1.5 text-sm font-medium text-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-600 aria-pressed:bg-white aria-pressed:text-gray-900 aria-pressed:shadow">Annual</button>
            </div>
          </div>
        </div>
        <div class="mx-auto mt-10 grid w-full max-w-md grid-cols-1 gap-8 lg:max-w-full lg:grid-cols-3">
          <div class="rounded-2xl ring-1 ring-gray-200">
            <div class="space-y-6 border-b border-gray-200 p-8">
              <h3 id="tier-basic" class="text-xl font-medium tracking-tight text-gray-900">Basic</h3>
              <p class="flex items-baseline gap-x-2">
                <span id="basic-price" class="text-5xl font-semibold tracking-tight text-gray-900">$10</span>
                <span class="text-base font-medium text-gray-600">/month</span>
              </p>
              <p class="text-base text-gray-600">Ideal for individuals and small teams.</p>
              <a href="#" aria-describedby="tier-basic" class="block rounded-md px-3 py-2.5 text-center text-base font-medium tracking-tight text-pink-500 ring-1 ring-inset ring-pink-200 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
            </div>
            <div class="p-8">
              <p class="text-sm font-semibold text-gray-600">Everything in our free plan plus...</p>
              <ul role="list" class="mt-5 space-y-3.5">
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-sm text-gray-600">10 GB Secure Data Storage</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-sm text-gray-600">Basic Performance Analytics</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-sm text-gray-600">Project Management Tools</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-sm text-gray-600">Community Support Access</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="overflow-hidden rounded-2xl ring-1 ring-gray-200">
            <div class="relative flex flex-col gap-y-6 border-b border-gray-200 p-8">
              <p class="absolute right-8 top-8 rounded-md bg-pink-500/10 px-2.5 py-1 text-xs font-bold text-pink-500 shadow-sm">Popular</p>
              <h3 id="tier-business" class="text-xl font-medium tracking-tight text-pink-500">Business</h3>
              <p class="flex items-baseline gap-x-2">
                <span id="business-price" class="text-5xl font-semibold tracking-tight text-gray-900">$20</span>
                <span class="text-base font-medium text-gray-600">/month</span>
              </p>
              <p class="text-base text-gray-600">Ideal for growing businesses.</p>
              <a href="#" aria-describedby="tier-business" class="block rounded-md bg-pink-500 px-3 py-2.5 text-center text-base font-medium tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
            </div>
            <div class="p-8">
              <p class="text-sm font-semibold text-gray-600">Everything in basic plan plus...</p>
              <ul role="list" class="mt-5 space-y-3.5">
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-sm text-gray-600">50 GB Secure Data Storage</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-sm text-gray-600">Advanced Performance Analytics</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-sm text-gray-600">Comprehensive Project Management</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-sm text-gray-600">Priority Email & Chat Support</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="rounded-2xl ring-1 ring-gray-200">
            <div class="space-y-6 border-b border-gray-200 p-8">
              <h3 id="tier-enterprise" class="text-xl font-medium tracking-tight text-gray-900">Enterprise</h3>
              <p class="flex items-baseline gap-x-2">
                <span id="enterprise-price" class="text-5xl font-semibold tracking-tight text-gray-900">$40</span>
                <span class="text-base font-medium text-gray-600">/month</span>
              </p>
              <p class="text-base text-gray-600">Best for large organizations.</p>
              <a href="#" aria-describedby="tier-enterprise" class="block rounded-md px-3 py-2.5 text-center text-base font-medium tracking-tight text-pink-500 ring-1 ring-inset ring-pink-200 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
            </div>
            <div class="p-8">
              <p class="text-sm font-semibold text-gray-600">Everything in our business plan plus...</p>
              <ul role="list" class="mt-5 space-y-3.5">
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-sm text-gray-600">Unlimited Data Storage</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-sm text-gray-600">Advanced Analytics</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-sm text-gray-600">Robust Project Management Tools</p>
                </li>
                <li class="flex gap-x-3">
                  <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-sm text-gray-600">Dedicated Customer Support</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

const prices = {
          basic: { monthly: "$10", annual: "$99" },
          business: { monthly: "$20", annual: "$199" },
          enterprise: { monthly: "$40", annual: "$399" },
        };

        const monthlyBtn = document.getElementById("monthly-pricing-button");
        const annualBtn = document.getElementById("annual-pricing-button");

        const updatePrices = (isMonthly) => {
          const period = isMonthly ? "monthly" : "annual";
          const unit = isMonthly ? "/month" : "/year";

          ["basic", "business", "enterprise"].forEach((plan) => {
            const priceElement = document.getElementById(`${plan}-price`);
            priceElement.textContent = prices[plan][period];
            priceElement.nextElementSibling.textContent = unit;
          });

          monthlyBtn.setAttribute("aria-pressed", isMonthly);
          annualBtn.setAttribute("aria-pressed", !isMonthly);
        };

        monthlyBtn.addEventListener("click", () => updatePrices(true));
        annualBtn.addEventListener("click", () => updatePrices(false));

Four tiers with toggle

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-4xl text-center">
          <h2 class="text-base font-semibold text-pink-500">Pricing</h2>
          <p class="mt-3 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Scalable solutions for businesses</p>
          <p class="mx-auto mt-6 w-full max-w-2xl text-pretty text-xl leading-8 text-gray-600">Choose the plan that best fits your needs, from solo freelancers to large enterprises.</p>
        </div>
        <div class="mt-16">
          <div class="flex justify-center">
            <div class="flex items-center gap-1 rounded-lg bg-gray-50 p-1 ring-1 ring-gray-200">
              <button id="monthly-pricing-button" aria-label="Show monthly options" aria-pressed="true" class="cursor-pointer rounded-md bg-transparent px-4 py-1.5 text-sm font-medium text-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-600 aria-pressed:bg-white aria-pressed:text-gray-900 aria-pressed:shadow">Monthly</button>
              <button id="annual-pricing-button" aria-label="Show annual options" aria-pressed="false" class="cursor-pointer rounded-md bg-transparent px-4 py-1.5 text-sm font-medium text-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-600 aria-pressed:bg-white aria-pressed:text-gray-900 aria-pressed:shadow">Annual</button>
            </div>
          </div>
        </div>
        <div class="mx-auto mt-10 grid w-full max-w-md grid-cols-1 gap-8 md:max-w-2xl md:grid-cols-2 lg:max-w-4xl xl:max-w-full xl:grid-cols-4">
          <div class="flex flex-col rounded-2xl px-5 py-8 ring-1 ring-gray-200">
            <h3 id="tier-basic" class="text-xl font-medium tracking-tight text-gray-900">Basic</h3>
            <p class="mt-3 text-base text-gray-600">Essential Features for Getting Started.</p>
            <p class="mt-6 flex items-baseline gap-x-1">
              <span id="basic-price" class="text-5xl font-semibold tracking-tight text-gray-900">$10</span>
              <span class="text-sm font-medium text-gray-600">/month</span>
            </p>
            <div class="mt-6">
              <a href="#" aria-describedby="tier-basic" class="inline-block rounded-md px-6 py-2 text-sm font-medium text-pink-500 ring-1 ring-inset ring-pink-200 focus-within:outline-offset-2 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-pink-500">Choose basic</a>
            </div>
            <div class="mt-6 h-px w-full bg-gray-100"></div>
            <ul role="list" class="mt-6 space-y-4">
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">10 GB Secure Data Storage</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Basic Performance Analytics</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Project Management Tools</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Community Support Access</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Single User Access</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Standard Data Security Measures</p>
              </li>
            </ul>
          </div>
          <div class="flex flex-col rounded-2xl px-5 py-8 ring-1 ring-gray-200">
            <h3 id="tier-standard" class="text-xl font-medium tracking-tight text-gray-900">Standard</h3>
            <p class="mt-3 text-base text-gray-600">Advanced Tools for Growing Teams.</p>
            <p class="mt-6 flex items-baseline gap-x-1">
              <span id="standard-price" class="text-5xl font-semibold tracking-tight text-gray-900">$30</span>
              <span class="text-sm font-medium text-gray-600">/month</span>
            </p>
            <div class="mt-6">
              <a href="#" aria-describedby="tier-standard" class="inline-block rounded-md px-6 py-2 text-sm font-medium text-pink-500 ring-1 ring-inset ring-pink-200 focus-within:outline-offset-2 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-pink-500">Choose standard</a>
            </div>
            <div class="mt-6 h-px w-full bg-gray-100"></div>
            <ul role="list" class="mt-6 space-y-4">
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">100 GB Encrypted Storage</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Advanced Business Analytics</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Comprehensive Project Management</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Priority Email & Chat Support</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Team Collaboration Features</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Up to 10 Users</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Enhanced Security Protocols</p>
              </li>
            </ul>
          </div>
          <div class="relative flex flex-col rounded-2xl px-5 py-8 ring-2 ring-pink-500">
            <p class="absolute right-5 top-0 rounded-b-lg bg-pink-500 px-5 py-1.5 text-xs font-medium text-white shadow-sm">Most popular</p>
            <h3 id="tier-premium" class="text-xl font-medium tracking-tight text-pink-500">Premium</h3>
            <p class="mt-3 text-base text-gray-600">Enhanced Features for Expanding Businesses.</p>
            <p class="mt-6 flex items-baseline gap-x-1">
              <span id="premium-price" class="text-5xl font-semibold tracking-tight text-gray-900">$60</span>
              <span class="text-sm font-medium text-gray-600">/month</span>
            </p>
            <div class="mt-6">
              <a href="#" aria-describedby="tier-premium" class="inline-block rounded-md bg-pink-500 px-6 py-2 text-sm font-medium text-white shadow-sm focus-within:outline-offset-2 hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-pink-500">Choose premium</a>
            </div>
            <div class="mt-6 h-px w-full bg-gray-100"></div>
            <ul role="list" class="mt-6 space-y-4">
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">500 GB Secure Cloud Storage</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Premium Analytics and Reporting</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Multiple Project Management Tools</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Dedicated Customer Support</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Advanced Team Collaboration Tools</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Up to 50 Users</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">High-Level Security Measures</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Customizable User Interface</p>
              </li>
            </ul>
          </div>
          <div class="flex flex-col rounded-2xl px-5 py-8 ring-1 ring-gray-200">
            <h3 id="tier-enterprise" class="text-xl font-medium tracking-tight text-gray-900">Enterprise</h3>
            <p class="mt-3 text-base text-gray-600">Comprehensive Solutions for Large Organizations.</p>
            <p class="mt-6 flex items-baseline gap-x-1">
              <span id="enterprise-price" class="text-5xl font-semibold tracking-tight text-gray-900">$100</span>
              <span class="text-sm font-medium text-gray-600">/month</span>
            </p>
            <div class="mt-6">
              <a href="#" aria-describedby="tier-enterprise" class="inline-block rounded-md px-6 py-2 text-sm font-medium text-pink-500 ring-1 ring-inset ring-pink-200 focus-within:outline-offset-2 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-pink-500">Choose enterprise</a>
            </div>
            <div class="mt-6 h-px w-full bg-gray-100"></div>
            <ul role="list" class="mt-6 space-y-4">
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Unlimited Cloud Storage Capacity</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Extensive Data Analytics Suite</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Robust Project Management Tools</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Dedicated Account Management</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">24/7 Phone Support Service</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Advanced Collaboration Capabilities</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Unlimited Users</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">API Integration Access</p>
              </li>
              <li class="flex gap-x-3">
                <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g id="Complete">
                    <g id="tick">
                      <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </g>
                  </g>
                </svg>
                <p class="text-sm text-gray-600">Custom Security Solutions</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

const prices = {
          basic: { monthly: "$10", annually: "$99" },
          standard: { monthly: "$30", annually: "$299" },
          premium: { monthly: "$60", annually: "$599" },
          enterprise: { monthly: "$100", annually: "$999" },
        };

        const monthlyBtn = document.getElementById("monthly-pricing-button");
        const annualBtn = document.getElementById("annual-pricing-button");

        const updatePrices = (isMonthly) => {
          const period = isMonthly ? "monthly" : "annually";
          const unit = isMonthly ? "/month" : "/year";

          ["basic", "standard", "premium", "enterprise"].forEach((plan) => {
            const priceElement = document.getElementById(`${plan}-price`);
            priceElement.textContent = prices[plan][period];
            priceElement.nextElementSibling.textContent = unit;
          });

          monthlyBtn.setAttribute("aria-pressed", isMonthly);
          annualBtn.setAttribute("aria-pressed", !isMonthly);
        };

        monthlyBtn.addEventListener("click", () => updatePrices(true));
        annualBtn.addEventListener("click", () => updatePrices(false));

Three tiers with comparison table

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-4xl text-center">
          <h2 class="text-base font-semibold text-pink-500">Pricing</h2>
          <p class="mt-3 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Choose your right plan!</p>
          <p class="mx-auto mt-6 w-full max-w-2xl text-pretty text-xl leading-8 text-gray-600">Select from best plans, ensuring a perfect match. Need more or less? Customize your subscription for a seamless fit!</p>
        </div>
        <div class="mx-auto mt-16 w-full max-w-md space-y-8 lg:hidden">
          <div class="rounded-2xl p-8 ring-1 ring-gray-200">
            <h3 class="text-2xl font-medium tracking-tight text-gray-900">Startup</h3>
            <p class="mt-2 text-sm text-gray-600">Get started with essential tools. Perfect for new ventures and startups looking to grow.</p>
            <p class="mt-8 flex items-baseline gap-x-2">
              <span class="text-4xl font-semibold tracking-tight text-gray-900">$20</span>
              <span class="text-sm font-medium text-gray-600">/month</span>
            </p>
            <a href="#" class="mt-8 block rounded-md px-3 py-2.5 text-center text-sm font-medium tracking-tight text-pink-500 ring-1 ring-inset ring-pink-200 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
            <div class="mt-8">
              <ul role="list" class="space-y-4">
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Basic features</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">10 users</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">20GB individual data</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Support</p>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Basic analytics</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Export reports</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Scheduled reports</p>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">SSO/SAML authentication</p>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
          <div class="rounded-2xl p-8 ring-2 ring-pink-500">
            <h3 class="text-2xl font-medium tracking-tight text-gray-900">Growth</h3>
            <p class="mt-2 text-sm text-gray-600">Expand your capabilities with advanced features. Designed for growing small businesses.</p>
            <p class="mt-8 flex items-baseline gap-x-2">
              <span class="text-4xl font-semibold tracking-tight text-gray-900">$50</span>
              <span class="text-sm font-medium text-gray-600">/month</span>
            </p>
            <a href="#" class="mt-8 block rounded-md bg-pink-500 px-3 py-2.5 text-center text-sm font-medium tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
            <div class="mt-8">
              <ul role="list" class="space-y-4">
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Basic features</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">20 users</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">40GB individual data</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Support</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Automated workflows</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">200+ integrations</p>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Advanced analytics</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Export reports</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Scheduled reports</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">API access</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Advanced reports</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Saved reports</p>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">SSO/SAML authentication</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Advanced permissions</p>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
          <div class="rounded-2xl p-8 ring-1 ring-gray-200">
            <h3 class="text-2xl font-medium tracking-tight text-gray-900">Enterprise</h3>
            <p class="mt-2 text-sm text-gray-600">Maximize your potential with comprehensive solutions. Ideal for large and complex organizations.</p>
            <p class="mt-8 flex items-baseline gap-x-2">
              <span class="text-4xl font-semibold tracking-tight text-gray-900">Custom</span>
            </p>
            <a href="#" class="mt-8 block rounded-md px-3 py-2.5 text-center text-sm font-medium tracking-tight text-pink-500 ring-1 ring-inset ring-pink-200 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Contact</a>
            <div class="mt-8">
              <ul role="list" class="space-y-4">
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Basic features</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Unlimited users</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Unlimited individual data</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Support</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Automated workflows</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">200+ integrations</p>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Advanced analytics</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Export reports</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Scheduled reports</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">API access</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Advanced reports</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Saved reports</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Customer properties</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Custom fields</p>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">SSO/SAML authentication</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Advanced permissions</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Audit log</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-500">Data history</p>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="mt-16 hidden lg:block">
          <div class="relative -mx-8">
            <div aria-hidden="true" class="absolute inset-x-0 inset-y-0 flex w-full px-4 *:w-1/4 *:shrink-0 *:border-r *:border-gray-900/10">
              <div></div>
              <div></div>
              <div></div>
              <div class="last:border-0"></div>
            </div>
            <table class="relative w-full table-fixed border-separate border-spacing-x-8 text-left">
              <caption class="sr-only">Pricing comparison</caption>
              <colgroup>
                <col class="w-1/4" />
                <col class="w-1/4" />
                <col class="w-1/4" />
                <col class="w-1/4" />
              </colgroup>
              <thead>
                <tr>
                  <td></td>
                  <th scope="col" class="pt-6 xl:px-2"><div class="text-2xl font-medium tracking-tight text-gray-900">Startup</div></th>
                  <th scope="col" class="pt-6 xl:px-2"><div class="text-2xl font-medium tracking-tight text-gray-900">Growth</div></th>
                  <th scope="col" class="pt-6 xl:px-2"><div class="text-2xl font-medium tracking-tight text-gray-900">Enterprise</div></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row"><span class="sr-only">Description</span></th>
                  <td class="pt-2 xl:px-2"><span class="block text-sm text-gray-600">Get started with essential tools. Perfect for new ventures and startups looking to grow.</span></td>
                  <td class="pt-2 xl:px-2"><span class="block text-sm text-gray-600">Expand your capabilities with advanced features. Designed for growing small businesses.</span></td>
                  <td class="pt-2 xl:px-2"><span class="block text-sm text-gray-600">Maximize your potential with comprehensive solutions. Ideal for large and complex organizations.</span></td>
                </tr>
                <tr>
                  <th scope="row"><span class="sr-only">Price</span></th>
                  <td class="pt-8 xl:px-2">
                    <div class="flex items-baseline gap-x-2">
                      <span class="text-4xl font-semibold tracking-tight text-gray-900">$20</span>
                      <span class="text-sm font-medium text-gray-600">/month</span>
                    </div>
                    <a href="#" class="mt-8 block rounded-md px-3 py-2.5 text-center text-sm font-medium tracking-tight text-pink-500 ring-1 ring-inset ring-pink-200 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
                  </td>
                  <td class="pt-8 xl:px-2">
                    <div class="flex items-baseline gap-x-2">
                      <span class="text-4xl font-semibold tracking-tight text-gray-900">$50</span>
                      <span class="text-sm font-medium text-gray-600">/month</span>
                    </div>
                    <a href="#" class="mt-8 block rounded-md bg-pink-500 px-3 py-2.5 text-center text-sm font-medium tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
                  </td>
                  <td class="pt-8 xl:px-2">
                    <div class="flex items-baseline gap-x-2">
                      <span class="text-4xl font-semibold tracking-tight text-gray-900">Custom</span>
                    </div>
                    <a href="#" class="mt-8 block rounded-md px-3 py-2.5 text-center text-sm font-medium tracking-tight text-pink-500 ring-1 ring-inset ring-pink-200 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Contact</a>
                  </td>
                </tr>
                <tr>
                  <th scope="colgroup" colspan="4" class="pb-4 pt-8 text-base font-semibold leading-6 text-gray-900">
                    Features
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/10"></div>
                  </th>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    Basic features
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    Users
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-500">10</div>
                  </td>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-500">20</div>
                  </td>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-500">Unlimited</div>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    Individual data
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-500">20GB</div>
                  </td>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-500">40GB</div>
                  </td>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-500">Unlimited</div>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    Support
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    Automated workflows
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    200+ integrations
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="colgroup" colspan="4" class="pb-4 pt-16 text-base font-semibold leading-6 text-gray-900">
                    Reporting and analytics
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/10"></div>
                  </th>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    Analytics
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-500">Basic</div>
                  </td>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-500">Advanced</div>
                  </td>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-500">Advanced</div>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    Export reports
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    Scheduled reports
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    API access
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    Advanced reports
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    Saved reports
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    Customer properties
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    Custom fields
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="colgroup" colspan="4" class="pb-4 pt-16 text-base font-semibold leading-6 text-gray-900">
                    User access
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/10"></div>
                  </th>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    SSO/SAML authentication
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    Advanced permissions
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    Audit log
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                    Data history
                    <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

Three tiers with comparison table on dark

<div class="bg-gray-900 py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-4xl text-center">
          <h2 class="text-base font-semibold text-pink-500">Pricing</h2>
          <p class="mt-3 text-4xl font-semibold tracking-tight text-white sm:text-5xl">Choose your right plan!</p>
          <p class="mx-auto mt-6 w-full max-w-2xl text-pretty text-xl leading-8 text-gray-300">Select from best plans, ensuring a perfect match. Need more or less? Customize your subscription for a seamless fit!</p>
        </div>
        <div class="mx-auto mt-16 w-full max-w-md space-y-8 lg:hidden">
          <div class="rounded-2xl p-8 ring-1 ring-white/10">
            <h3 class="text-2xl font-medium tracking-tight text-white">Startup</h3>
            <p class="mt-2 text-sm text-gray-300">Get started with essential tools. Perfect for new ventures and startups looking to grow.</p>
            <p class="mt-8 flex items-baseline gap-x-2">
              <span class="text-4xl font-semibold tracking-tight text-white">$20</span>
              <span class="text-sm font-medium text-gray-300">/month</span>
            </p>
            <a href="#" class="mt-8 block rounded-md bg-white/10 px-3 py-2.5 text-center text-sm font-medium tracking-tight text-white hover:bg-white/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get started</a>
            <div class="mt-8">
              <ul role="list" class="space-y-4">
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Basic features</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">10 users</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">20GB individual data</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Support</p>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Basic analytics</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Export reports</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Scheduled reports</p>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">SSO/SAML authentication</p>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
          <div class="rounded-2xl p-8 ring-2 ring-pink-500">
            <h3 class="text-2xl font-medium tracking-tight text-white">Growth</h3>
            <p class="mt-2 text-sm text-gray-300">Expand your capabilities with advanced features. Designed for growing small businesses.</p>
            <p class="mt-8 flex items-baseline gap-x-2">
              <span class="text-4xl font-semibold tracking-tight text-white">$50</span>
              <span class="text-sm font-medium text-gray-300">/month</span>
            </p>
            <a href="#" class="mt-8 block rounded-md bg-pink-500 px-3 py-2.5 text-center text-sm font-medium tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
            <div class="mt-8">
              <ul role="list" class="space-y-4">
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Basic features</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">20 users</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">40GB individual data</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Support</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Automated workflows</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">200+ integrations</p>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Advanced analytics</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Export reports</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Scheduled reports</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">API access</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Advanced reports</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Saved reports</p>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">SSO/SAML authentication</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Advanced permissions</p>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
          <div class="rounded-2xl p-8 ring-1 ring-white/10">
            <h3 class="text-2xl font-medium tracking-tight text-white">Enterprise</h3>
            <p class="mt-2 text-sm text-gray-300">Maximize your potential with comprehensive solutions. Ideal for large and complex organizations.</p>
            <p class="mt-8 flex items-baseline gap-x-2">
              <span class="text-4xl font-semibold tracking-tight text-white">Custom</span>
            </p>
            <a href="#" class="mt-8 block rounded-md bg-white/10 px-3 py-2.5 text-center text-sm font-medium tracking-tight text-white hover:bg-white/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Contact</a>
            <div class="mt-8">
              <ul role="list" class="space-y-4">
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Basic features</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Unlimited users</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Unlimited individual data</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Support</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Automated workflows</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">200+ integrations</p>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Advanced analytics</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Export reports</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Scheduled reports</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">API access</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Advanced reports</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Saved reports</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Customer properties</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Custom fields</p>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul role="list" class="space-y-4">
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">SSO/SAML authentication</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Advanced permissions</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Audit log</p>
                    </li>
                    <li class="flex gap-x-3">
                      <svg class="h-5 w-5 text-gray-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g id="Complete">
                          <g id="tick">
                            <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                          </g>
                        </g>
                      </svg>
                      <p class="text-sm text-gray-300">Data history</p>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="mt-16 hidden lg:block">
          <div class="relative -mx-8">
            <div aria-hidden="true" class="absolute inset-x-0 inset-y-0 flex w-full px-4 *:w-1/4 *:shrink-0 *:border-r *:border-white/10">
              <div></div>
              <div></div>
              <div></div>
              <div class="last:border-0"></div>
            </div>
            <table class="relative w-full table-fixed border-separate border-spacing-x-8 text-left">
              <caption class="sr-only">Pricing comparison</caption>
              <colgroup>
                <col class="w-1/4" />
                <col class="w-1/4" />
                <col class="w-1/4" />
                <col class="w-1/4" />
              </colgroup>
              <thead>
                <tr>
                  <td></td>
                  <th scope="col" class="pt-6 xl:px-2"><div class="text-2xl font-medium tracking-tight text-white">Startup</div></th>
                  <th scope="col" class="pt-6 xl:px-2"><div class="text-2xl font-medium tracking-tight text-white">Growth</div></th>
                  <th scope="col" class="pt-6 xl:px-2"><div class="text-2xl font-medium tracking-tight text-white">Enterprise</div></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row"><span class="sr-only">Description</span></th>
                  <td class="pt-2 xl:px-2"><span class="block text-sm text-gray-300">Get started with essential tools. Perfect for new ventures and startups looking to grow.</span></td>
                  <td class="pt-2 xl:px-2"><span class="block text-sm text-gray-300">Expand your capabilities with advanced features. Designed for growing small businesses.</span></td>
                  <td class="pt-2 xl:px-2"><span class="block text-sm text-gray-300">Maximize your potential with comprehensive solutions. Ideal for large and complex organizations.</span></td>
                </tr>
                <tr>
                  <th scope="row"><span class="sr-only">Price</span></th>
                  <td class="pt-8 xl:px-2">
                    <div class="flex items-baseline gap-x-2">
                      <span class="text-4xl font-semibold tracking-tight text-white">$20</span>
                      <span class="text-sm font-medium text-gray-300">/month</span>
                    </div>
                    <a href="#" class="mt-8 block rounded-md bg-white/10 px-3 py-2.5 text-center text-sm font-medium tracking-tight text-white hover:bg-white/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get started</a>
                  </td>
                  <td class="pt-8 xl:px-2">
                    <div class="flex items-baseline gap-x-2">
                      <span class="text-4xl font-semibold tracking-tight text-white">$50</span>
                      <span class="text-sm font-medium text-gray-300">/month</span>
                    </div>
                    <a href="#" class="mt-8 block rounded-md bg-pink-500 px-3 py-2.5 text-center text-sm font-medium tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
                  </td>
                  <td class="pt-8 xl:px-2">
                    <div class="flex items-baseline gap-x-2">
                      <span class="text-4xl font-semibold tracking-tight text-white">Custom</span>
                    </div>
                    <a href="#" class="mt-8 block rounded-md bg-white/10 px-3 py-2.5 text-center text-sm font-medium tracking-tight text-white hover:bg-white/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Contact</a>
                  </td>
                </tr>
                <tr>
                  <th scope="colgroup" colspan="4" class="pb-4 pt-8 text-base font-semibold leading-6 text-white">
                    Features
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/10"></div>
                  </th>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    Basic features
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    Users
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-300">10</div>
                  </td>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-300">20</div>
                  </td>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-300">Unlimited</div>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    Individual data
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-300">20GB</div>
                  </td>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-300">40GB</div>
                  </td>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-300">Unlimited</div>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    Support
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    Automated workflows
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-500" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    200+ integrations
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-500" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="colgroup" colspan="4" class="pb-4 pt-16 text-base font-semibold leading-6 text-white">
                    Reporting and analytics
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/10"></div>
                  </th>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    Analytics
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-300">Basic</div>
                  </td>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-300">Advanced</div>
                  </td>
                  <td class="py-4 xl:px-2">
                    <div class="text-center text-sm leading-6 text-gray-300">Advanced</div>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    Export reports
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    Scheduled reports
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    API access
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-500" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    Advanced reports
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-500" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    Saved reports
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-500" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    Customer properties
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-500" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-500" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    Custom fields
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-500" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-500" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="colgroup" colspan="4" class="pb-4 pt-16 text-base font-semibold leading-6 text-white">
                    User access
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/10"></div>
                  </th>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    SSO/SAML authentication
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    Advanced permissions
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-500" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    Audit log
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-500" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-500" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
                <tr>
                  <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-white">
                    Data history
                    <div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
                  </th>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-500" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Startup</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-3 w-3 text-gray-500" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                      <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" />
                    </svg>
                    <span class="sr-only">Not included in Growth</span>
                  </td>
                  <td class="py-4 xl:px-2">
                    <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g id="Complete">
                        <g id="tick">
                          <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                        </g>
                      </g>
                    </svg>
                    <span class="sr-only">Included in Enterprise</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

Three tiers comparison with toggle

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-4xl text-center">
          <h2 class="text-base font-semibold text-pink-500">Pricing</h2>
          <p class="mt-3 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Let's skyrocket your business</p>
          <p class="mx-auto mt-6 w-full max-w-2xl text-pretty text-xl leading-8 text-gray-600">Select from best plans, ensuring a perfect match. Need more or less? Customize your subscription for a seamless fit!</p>
        </div>
        <div class="mt-16">
          <div class="flex justify-center">
            <div class="flex items-center gap-1 rounded-lg bg-gray-50 p-1 ring-1 ring-gray-200">
              <button id="monthly-pricing-button" aria-label="Show monthly options" aria-pressed="true" class="cursor-pointer rounded-md bg-transparent px-4 py-1.5 text-sm font-medium text-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-500 aria-pressed:bg-white aria-pressed:text-gray-900 aria-pressed:shadow">Monthly</button>
              <button id="annual-pricing-button" aria-label="Show annual options" aria-pressed="false" class="cursor-pointer rounded-md bg-transparent px-4 py-1.5 text-sm font-medium text-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-500 aria-pressed:bg-white aria-pressed:text-gray-900 aria-pressed:shadow">Annual</button>
            </div>
          </div>
        </div>
        <div class="mx-auto mt-10 grid w-full max-w-md grid-cols-1 gap-8 lg:max-w-full lg:grid-cols-3">
          <div class="flex flex-col rounded-2xl p-8 ring-1 ring-gray-200 lg:bg-gray-50 lg:p-6 lg:ring-0">
            <h3 id="tier-basic" class="text-2xl font-semibold tracking-tight text-gray-900">Basic</h3>
            <p class="mt-1 text-base text-gray-600">Best for small teams and freelancers.</p>
            <div class="mt-auto">
              <p class="mt-10 flex items-baseline gap-x-2">
                <span id="basic-price" class="text-5xl font-semibold tracking-tight text-gray-900">$10</span>
                <span class="text-base font-medium text-gray-500">/month</span>
              </p>
              <a href="#" aria-describedby="tier-basic" class="mt-8 block rounded-md px-3 py-2.5 text-center text-base font-medium tracking-tight text-pink-500 ring-1 ring-inset ring-pink-200 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
              <div class="mt-8 lg:hidden">
                <ul role="list" class="space-y-4">
                  <li>
                    <ul role="list" class="space-y-4">
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Basic features</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">10 users</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">20GB individual data</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Support</p>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <ul role="list" class="space-y-4">
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Basic analytics</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Export reports</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Scheduled reports</p>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <ul role="list" class="space-y-4">
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">SSO/SAML authentication</p>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="flex flex-col rounded-2xl p-8 ring-2 ring-pink-500 lg:bg-gray-50 lg:p-6 lg:ring-0">
            <h3 id="tier-business" class="text-2xl font-semibold tracking-tight text-gray-900">Business</h3>
            <p class="mt-1 text-base text-gray-600">Best for growing teams.</p>
            <div class="mt-auto">
              <p class="mt-10 flex items-baseline gap-x-2">
                <span id="business-price" class="text-5xl font-semibold tracking-tight text-gray-900">$20</span>
                <span class="text-base font-medium text-gray-500">/month</span>
              </p>
              <a href="#" aria-describedby="tier-business" class="mt-8 block rounded-md bg-pink-500 px-3 py-2.5 text-center text-base font-medium tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
              <div class="mt-8 lg:hidden">
                <ul role="list" class="space-y-4">
                  <li>
                    <ul role="list" class="space-y-4">
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Basic features</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">20 users</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">40GB individual data</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Support</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Automated workflows</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">200+ integrations</p>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <ul role="list" class="space-y-4">
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Advanced analytics</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Export reports</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Scheduled reports</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">API access</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Advanced reports</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Saved reports</p>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <ul role="list" class="space-y-4">
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">SSO/SAML authentication</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Advanced permissions</p>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="flex flex-col rounded-2xl p-8 ring-1 ring-gray-200 lg:bg-gray-50 lg:p-6 lg:ring-0">
            <h3 id="tier-enterprise" class="text-2xl font-semibold tracking-tight text-gray-900">Enterprise</h3>
            <p class="mt-1 text-base text-gray-600">Best for large organizations.</p>
            <div class="mt-auto">
              <p class="mt-10 flex items-baseline gap-x-2">
                <span id="enterprise-price" class="text-5xl font-semibold tracking-tight text-gray-900">$40</span>
                <span class="text-base font-medium text-gray-500">/month</span>
              </p>
              <a href="#" aria-describedby="tier-enterprise" class="mt-8 block rounded-md px-3 py-2.5 text-center text-base font-medium tracking-tight text-pink-500 ring-1 ring-inset ring-pink-200 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
              <div class="mt-8 lg:hidden">
                <ul role="list" class="space-y-4">
                  <li>
                    <ul role="list" class="space-y-4">
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Basic features</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Unlimited users</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Unlimited individual data</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Support</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Automated workflows</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">200+ integrations</p>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <ul role="list" class="space-y-4">
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Advanced analytics</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Export reports</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Scheduled reports</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">API access</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Advanced reports</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Saved reports</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Customer properties</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Custom fields</p>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <ul role="list" class="space-y-4">
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">SSO/SAML authentication</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Advanced permissions</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Audit log</p>
                      </li>
                      <li class="flex gap-x-3">
                        <svg class="h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                          <g id="Complete">
                            <g id="tick">
                              <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                            </g>
                          </g>
                        </svg>
                        <p class="text-sm text-gray-500">Data history</p>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="mt-24 hidden lg:block">
          <section aria-labelledby="comparison-heading">
            <h2 id="comparison-heading" class="sr-only">Feature Comparison</h2>
            <div class="grid grid-cols-4 gap-8 before:block">
              <div>
                <p class="text-base font-semibold leading-6 text-gray-900">Basic</p>
                <p class="mt-1 text-sm leading-6 text-gray-500">Best for small teams and freelancers.</p>
              </div>
              <div>
                <p class="text-base font-semibold leading-6 text-gray-900">Business</p>
                <p class="mt-1 text-sm leading-6 text-gray-500">Best for growing business.</p>
              </div>
              <div>
                <p class="text-base font-semibold leading-6 text-gray-900">Enterprise</p>
                <p class="mt-1 text-sm leading-6 text-gray-500">Best for large organizations.</p>
              </div>
            </div>
            <div class="-mt-6 space-y-16">
              <div>
                <h3 class="text-base font-semibold leading-6 text-gray-900">Features</h3>
                <div class="relative -mx-8 mt-10">
                  <div aria-hidden="true" class="absolute inset-x-8 inset-y-0 grid grid-cols-4 gap-8 before:block">
                    <div class="rounded-lg ring-1 ring-gray-200"></div>
                    <div class="rounded-lg ring-2 ring-pink-500"></div>
                    <div class="rounded-lg ring-1 ring-gray-200"></div>
                  </div>
                  <table class="relative w-full table-fixed border-separate border-spacing-x-8 text-left">
                    <thead>
                      <tr>
                        <th scope="col">
                          <span class="sr-only">Feature</span>
                        </th>
                        <th scope="col">
                          <span class="sr-only">Basic tier</span>
                        </th>
                        <th scope="col">
                          <span class="sr-only">Business tier</span>
                        </th>
                        <th scope="col">
                          <span class="sr-only">Enterprise tier</span>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                          Basic features
                          <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/10"></div>
                        </th>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Basic</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Business</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Enterprise</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                          Users
                          <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/10"></div>
                        </th>
                        <td class="py-4 xl:px-2">
                          <div class="text-center text-sm leading-6 text-gray-500">10</div>
                        </td>
                        <td class="py-4 xl:px-2">
                          <div class="text-center text-sm leading-6 text-gray-500">20</div>
                        </td>
                        <td class="py-4 xl:px-2">
                          <div class="text-center text-sm leading-6 text-gray-500">Unlimited</div>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                          Individual data
                          <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/10"></div>
                        </th>
                        <td class="py-4 xl:px-2">
                          <div class="text-center text-sm leading-6 text-gray-500">20GB</div>
                        </td>
                        <td class="py-4 xl:px-2">
                          <div class="text-center text-sm leading-6 text-gray-500">40GB</div>
                        </td>
                        <td class="py-4 xl:px-2">
                          <div class="text-center text-sm leading-6 text-gray-500">Unlimited</div>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                          Support
                          <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/10"></div>
                        </th>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Basic</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Business</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Enterprise</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                          Automated workflows
                          <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/10"></div>
                        </th>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                            <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"></path>
                          </svg>
                          <span class="sr-only">Not included in Basic</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Business</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Enterprise</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">200+ integrations</th>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                            <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"></path>
                          </svg>
                          <span class="sr-only">Not included in Basic</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Business</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Enterprise</span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div>
                <h3 class="text-base font-semibold leading-6 text-gray-900">Reporting and analytics</h3>
                <div class="relative -mx-8 mt-10">
                  <div aria-hidden="true" class="absolute inset-x-8 inset-y-0 grid grid-cols-4 gap-8 before:block">
                    <div class="rounded-lg ring-1 ring-gray-200"></div>
                    <div class="rounded-lg ring-2 ring-pink-500"></div>
                    <div class="rounded-lg ring-1 ring-gray-200"></div>
                  </div>
                  <table class="relative w-full table-fixed border-separate border-spacing-x-8 text-left">
                    <thead>
                      <tr>
                        <th scope="col">
                          <span class="sr-only">Feature</span>
                        </th>
                        <th scope="col">
                          <span class="sr-only">Basic tier</span>
                        </th>
                        <th scope="col">
                          <span class="sr-only">Business tier</span>
                        </th>
                        <th scope="col">
                          <span class="sr-only">Enterprise tier</span>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                          Analytics
                          <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                        </th>
                        <td class="py-4 xl:px-2">
                          <div class="text-center text-sm leading-6 text-gray-500">Basic</div>
                        </td>
                        <td class="py-4 xl:px-2">
                          <div class="text-center text-sm leading-6 text-gray-500">Advanced</div>
                        </td>
                        <td class="py-4 xl:px-2">
                          <div class="text-center text-sm leading-6 text-gray-500">Advanced</div>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                          Export reports
                          <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                        </th>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Basic</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Business</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Enterprise</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                          Scheduled reports
                          <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                        </th>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Basic</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Business</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Enterprise</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                          API access
                          <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                        </th>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                            <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"></path>
                          </svg>
                          <span class="sr-only">Not included in Basic</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Business</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Enterprise</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                          Advanced reports
                          <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                        </th>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                            <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"></path>
                          </svg>
                          <span class="sr-only">Not included in Basic</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Business</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Enterprise</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                          Saved reports
                          <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                        </th>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                            <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"></path>
                          </svg>
                          <span class="sr-only">Not included in Basic</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Business</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Enterprise</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                          Customer properties
                          <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                        </th>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                            <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"></path>
                          </svg>
                          <span class="sr-only">Not included in Basic</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                            <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"></path>
                          </svg>
                          <span class="sr-only">Not included in Business</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Enterprise</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">Custom fields</th>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                            <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"></path>
                          </svg>
                          <span class="sr-only">Not included in Basic</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                            <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"></path>
                          </svg>
                          <span class="sr-only">Not included in Business</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Enterprise</span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div>
                <h3 class="text-base font-semibold leading-6 text-gray-900">User access</h3>
                <div class="relative -mx-8 mt-10">
                  <div aria-hidden="true" class="absolute inset-x-8 inset-y-0 grid grid-cols-4 gap-8 before:block">
                    <div class="rounded-lg ring-1 ring-gray-200"></div>
                    <div class="rounded-lg ring-2 ring-pink-500"></div>
                    <div class="rounded-lg ring-1 ring-gray-200"></div>
                  </div>
                  <table class="relative w-full table-fixed border-separate border-spacing-x-8 text-left">
                    <thead>
                      <tr>
                        <th scope="col">
                          <span class="sr-only">Feature</span>
                        </th>
                        <th scope="col">
                          <span class="sr-only">Basic tier</span>
                        </th>
                        <th scope="col">
                          <span class="sr-only">Business tier</span>
                        </th>
                        <th scope="col">
                          <span class="sr-only">Enterprise tier</span>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                          SSO/SAML authentication
                          <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                        </th>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Basic</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Business</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Enterprise</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                          Advanced permissions
                          <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                        </th>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                            <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"></path>
                          </svg>
                          <span class="sr-only">Not included in Basic</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Business</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Enterprise</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">
                          Audit log
                          <div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
                        </th>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                            <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"></path>
                          </svg>
                          <span class="sr-only">Not included in Basic</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                            <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"></path>
                          </svg>
                          <span class="sr-only">Not included in Business</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Enterprise</span>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="py-4 pr-2 text-sm font-medium leading-6 text-gray-900">Data history</th>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                            <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"></path>
                          </svg>
                          <span class="sr-only">Not included in Basic</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-3 w-3 text-gray-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                            <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"></path>
                          </svg>
                          <span class="sr-only">Not included in Business</span>
                        </td>
                        <td class="py-4 xl:px-2">
                          <svg class="mx-auto h-5 w-5 text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <g id="Complete">
                              <g id="tick">
                                <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                              </g>
                            </g>
                          </svg>
                          <span class="sr-only">Included in Enterprise</span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="mt-8 grid grid-cols-4 gap-8 before:block">
              <a href="#" aria-describedby="tier-basic" class="mt-4 block rounded-md px-3 py-2.5 text-center text-base font-medium tracking-tight text-pink-500 ring-1 ring-inset ring-pink-200 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
              <a href="#" aria-describedby="tier-business" class="mt-4 block rounded-md bg-pink-500 px-3 py-2.5 text-center text-base font-medium tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
              <a href="#" aria-describedby="tier-enterprise" class="mt-4 block rounded-md px-3 py-2.5 text-center text-base font-medium tracking-tight text-pink-500 ring-1 ring-inset ring-pink-200 hover:ring-pink-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
            </div>
          </section>
        </div>
      </div>
    </div>

const prices = {
          basic: { monthly: "$10", annually: "$79" },
          business: { monthly: "$20", annually: "$159" },
          enterprise: { monthly: "$40", annually: "$319" },
        };

        const monthlyBtn = document.getElementById("monthly-pricing-button");
        const annualBtn = document.getElementById("annual-pricing-button");

        const updatePrices = (isMonthly) => {
          const period = isMonthly ? "monthly" : "annually";
          const unit = isMonthly ? "/month" : "/year";

          ["basic", "business", "enterprise"].forEach((plan) => {
            const priceElement = document.getElementById(`${plan}-price`);
            priceElement.textContent = prices[plan][period];
            priceElement.nextElementSibling.textContent = unit;
          });

          monthlyBtn.setAttribute("aria-pressed", isMonthly);
          annualBtn.setAttribute("aria-pressed", !isMonthly);
        };

        monthlyBtn.addEventListener("click", () => updatePrices(true));
        annualBtn.addEventListener("click", () => updatePrices(false));

Frequently asked questions

: Side-by-side two-tier and three-tier cards, a version with a highlighted popular plan, monthly/annual toggle, a full comparison table, and single-plan CTA cards.
: When you click the toggle it swaps the prices between monthly and annual. The vanilla JavaScript for that is already included in the component, just copy the full snippet and it works as is.
: Yes. Three-column tier cards stack to a single column on mobile.

Related Tailwind CSS components

More free, copy-paste Tailwind CSS components to use in your projects.

CTA Sections 14 components FAQs 10 components Feature Sections 18 components Hero Sections 12 components