pricing

<section x-data="{duration: 'monthly'}">
  <div class="px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-screen-xl relative">
    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:items-center">
      <div
        class="flex flex-col gap-12 justify-between max-w-md mx-auto lg:mx-0 md:text-balance text-center lg:text-left"
      >
        <div>
          <span
            class="font-mono text-xs font-medium tracking-tight text-blue-600 uppercase"
            >Tagline</span
          >
          <p class="text-4xl mt-4 font-semibold tracking-tight text-gray-900">
            Equip your business with world class software
          </p>
          <p class="text-base text-balance mt-4 text-gray-700">
            Every plan includes every feature, and can scale as your team does.
          </p>
          <div
            class="w-full mt-8 border bg-white overflow-hidden justify-center mx-auto lg:mx-0 inline-flex p-0.5 rounded-lg max-w-xs shadow shadow-white/20 z-0"
          >
            <!-- Monthly Pricing Button: Sets 'duration' to 'monthly' when clicked -->
            <button
              id="monthly-pricing-button"
              class="block w-full px-8 py-2 text-xs font-medium transition border border-transparent rounded-md text-blue-900"
              @click="duration = 'monthly'"
              :class="duration == 'monthly' ? 'bg-gray-100 border text-blue-900 ' : ''"
              type="button"
            >
              Monthly
            </button>
            <!-- Annual Pricing Button: Sets 'duration' to 'annual' when clicked -->
            <button
              id="annual-pricing-button"
              class="block w-full px-8 py-2 text-xs font-medium transition border border-transparent rounded-md text-blue-900"
              @click="duration = 'annual'"
              :class="duration == 'annual' ? 'bg-gray-100 border text-blue-900 ' : ''"
              type="button"
            >
              Annual
            </button>
          </div>
        </div>
      </div>
      <div
        class="flex flex-col h-full justify-between p-8 bg-gradient-to-b from-blue-500 to-indigo-600 rounded-3xl"
      >
        <div>
          <div class="flex flex-col gap-2">
            <div class="flex items-center gap-2 justify-between">
              <p class="text-xl font-medium text-white">Basic</p>
              <p
                class="font-semibold flex items-baseline text-2xl tracking-tighter font-mono text-white"
              >
                <span
                  data-monthly="$49"
                  data-annual="$39"
                  x-text="$el.dataset[duration]"
                ></span>
                <span class="text-sm font-normal tracking-normal text-gray-200">
                  <span x-show="duration === 'monthly'">
                    <span x-show="duration === 'monthly'"> /month</span></span
                  >
                  <span x-show="duration === 'annual'" style="display: none">
                    /annually</span
                  >
                </span>
              </p>
            </div>
            <ul
              class="grid grid-cols-1 sm:grid-cols-2 l mt-10 text-sm text-white gap-y-3"
              role="list"
            >
              <li class="flex flex-row items-center gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="size-4 icon icon-tabler icon-tabler-circle-check-filled text-white"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path
                    d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
                    stroke-width="0"
                    fill="currentColor"
                  ></path>
                </svg>
                <span>Unlimited members</span>
              </li>
              <li class="flex flex-row items-center gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="size-4 icon icon-tabler icon-tabler-circle-check-filled text-white"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path
                    d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
                    stroke-width="0"
                    fill="currentColor"
                  ></path>
                </svg>
                <span>2 teams </span>
              </li>
              <li class="flex flex-row items-center gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="size-4 icon icon-tabler icon-tabler-circle-check-filled text-white"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path
                    d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
                    stroke-width="0"
                    fill="currentColor"
                  ></path>
                </svg>
                <span>50 issues (+unlimited)</span>
              </li>
              <li class="flex flex-row items-center gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="size-4 icon icon-tabler icon-tabler-circle-check-filled text-white"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path
                    d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
                    stroke-width="0"
                    fill="currentColor"
                  ></path>
                </svg>
                <span>Slack, GitHub, and API access</span>
              </li>
            </ul>
          </div>
          <div class="w-full mt-8">
            <a
              aria-describedby="#_"
              class="flex items-center justify-center gap-2 h-10 px-4 py-2 text-sm font-medium text-gray-500 transition-all bg-white border border-gray-300 rounded-lg hover:text-gray-700 focus:ring-2 shadow shadow-gray-500/5 focus:ring-gray-900 focus:ring-offset-2 ring-offset-gray-200 duration-300 hover:border-gray-200 hover:shadow-none w-full"
              href="#_"
              >Get started</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</section>