Pricing Switch

<!-- Pricing Switch -->
<!-- An Alpine.js and Tailwind CSS component by https://pinemix.com -->
<div
  x-data="{
    pricing: 'monthly' // 'monthly', 'annual'
   }"
  class="bg-white dark:bg-zinc-900 dark:text-zinc-100"
>
  <div class="container mx-auto space-y-6 px-4 lg:px-8 xl:max-w-7xl">
    <!-- Heading -->
    <div class="text-center">
      <h2 class="mb-2 text-3xl font-black text-black dark:text-white">
        Pricing Plans
      </h2>
      <h3
        class="mx-auto text-lg/relaxed text-zinc-800 dark:text-zinc-200 lg:w-2/3"
      >
        Choose the best plan for your online business and elevate your game
        today.
      </h3>
    </div>
    <!-- END Heading -->

    <!-- Payment Preference -->
    <div class="text-center">
      <div
        class="inline-flex rounded-xl bg-zinc-100/75 p-2 text-center dark:bg-zinc-800/75"
      >
        <div class="relative inline-flex items-center rounded-lg">
          <div
            class="absolute inset-0 w-1/2 rounded-lg bg-white shadow-sm transition duration-150 ease-out dark:bg-zinc-700/75"
            x-bind:class="{
              'translate-x-full rtl:-translate-x-full': pricing === 'annual',
            }"
          ></div>
          <label class="group relative flex">
            <input
              x-model="pricing"
              type="radio"
              class="peer absolute start-0 top-0 appearance-none opacity-0"
              id="pricing-switch-monthly"
              name="pricing-switch"
              value="monthly"
              x-bind:checked="pricing === 'monthly'"
            />
            <span
              class="relative flex grow cursor-pointer rounded-lg p-2 transition hover:text-black peer-focus-visible:ring peer-focus-visible:ring-zinc-200 dark:hover:text-white dark:peer-focus-visible:ring-zinc-500/50"
            >
              <span class="w-24 grow text-center text-sm font-semibold">
                Monthly
              </span>
            </span>
          </label>
          <label class="group relative flex">
            <input
              x-model="pricing"
              type="radio"
              class="peer absolute start-0 top-0 appearance-none opacity-0"
              id="pricing-switch-annual"
              name="pricing-switch"
              value="annual"
              x-bind:checked="pricing === 'annual'"
            />
            <span
              class="relative flex grow cursor-pointer rounded-lg p-2 transition hover:text-black peer-focus-visible:ring peer-focus-visible:ring-zinc-200 dark:hover:text-white dark:peer-focus-visible:ring-zinc-500/50"
            >
              <span class="w-24 grow text-center text-sm font-semibold">
                Annual
              </span>
            </span>
          </label>
        </div>
      </div>
    </div>
    <!-- END Payment Preference -->

    <!-- Pricing Plans -->
    <div
      class="mx-auto grid grid-cols-1 gap-4 sm:grid-cols-2 lg:gap-8 2xl:w-2/3"
    >
      <!-- Developer Plan -->
      <div
        class="flex flex-col overflow-hidden rounded-lg border border-zinc-200 bg-white dark:border-zinc-700/75 dark:bg-zinc-900"
      >
        <div class="grow p-6 text-center">
          <span
            class="mb-5 inline-block rounded-full px-3 py-1 text-lg font-bold text-zinc-700 underline decoration-zinc-200 decoration-dotted decoration-2 underline-offset-8 dark:text-zinc-200 dark:decoration-zinc-700/75"
          >
            Developer
          </span>
          <div x-cloak x-show="pricing === 'monthly'" class="mb-1">
            <span class="text-4xl font-extrabold">$29</span>
          </div>
          <div x-cloak x-show="pricing === 'annual'" class="mb-1">
            <span class="text-4xl font-extrabold">$179</span>
          </div>
          <p
            x-cloak
            x-show="pricing === 'monthly'"
            class="text-sm font-medium text-zinc-600 dark:text-zinc-400"
          >
            per month
          </p>
          <p
            x-cloak
            x-show="pricing === 'annual'"
            class="text-sm font-medium text-zinc-600 dark:text-zinc-400"
          >
            per year
          </p>
        </div>
        <div
          class="flex justify-center bg-zinc-50 px-6 py-8 text-zinc-950 dark:bg-zinc-800/25 dark:text-zinc-50"
        >
          <ul class="space-y-4 text-sm lg:text-base">
            <li class="flex items-center gap-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                class="hi-mini hi-check size-6 text-teal-600 dark:text-teal-500"
              >
                <path
                  fill-rule="evenodd"
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              <span><strong>50</strong> projects</span>
            </li>
            <li class="flex items-center gap-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                class="hi-mini hi-check size-6 text-teal-600 dark:text-teal-500"
              >
                <path
                  fill-rule="evenodd"
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              <span><strong>10</strong> paying customers</span>
            </li>
            <li class="flex items-center gap-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                class="hi-mini hi-check size-6 text-teal-600 dark:text-teal-500"
              >
                <path
                  fill-rule="evenodd"
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              <span><strong>10GB</strong> SSD storage</span>
            </li>
            <li class="flex items-center gap-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                class="hi-mini hi-check size-6 text-teal-600 dark:text-teal-500"
              >
                <path
                  fill-rule="evenodd"
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              <span><strong>1TB</strong> bandwidth</span>
            </li>
            <li class="flex items-center gap-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                class="hi-mini hi-check size-6 text-teal-600 dark:text-teal-500"
              >
                <path
                  fill-rule="evenodd"
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              <span><strong>24/7</strong> email support</span>
            </li>
          </ul>
        </div>
        <div class="p-6 text-center">
          <a
            href="javascript:void(0)"
            class="inline-flex w-full max-w-64 items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-4 py-3 text-sm font-medium leading-5 text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500/50 active:border-zinc-700 active:bg-zinc-700 dark:border-zinc-700/50 dark:bg-zinc-700/50 dark:ring-zinc-700/50 dark:hover:border-zinc-700 dark:hover:bg-zinc-700/75 dark:active:border-zinc-700/50 dark:active:bg-zinc-700/50"
          >
            Get Started
          </a>
        </div>
      </div>
      <!-- END Developer Plan -->

      <!-- Unlimited Plan -->
      <div
        class="relative flex flex-col overflow-hidden rounded-lg border border-zinc-200 bg-white dark:border-zinc-700/75 dark:bg-zinc-900"
      >
        <div
          class="absolute end-0 top-0 flex size-12 items-center justify-center text-zinc-600"
        >
          <svg
            class="hi-solid hi-bookmark inline-block size-5 text-teal-500"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M6.32 2.577a49.255 49.255 0 0111.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 01-1.085.67L12 18.089l-7.165 3.583A.75.75 0 013.75 21V5.507c0-1.47 1.073-2.756 2.57-2.93z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <div class="grow p-6 text-center">
          <span
            class="mb-5 inline-block rounded-full px-3 py-1 text-lg font-bold text-zinc-700 underline decoration-zinc-200 decoration-dotted decoration-2 underline-offset-8 dark:text-zinc-200 dark:decoration-zinc-700/75"
          >
            Unlimited
          </span>
          <div x-cloak x-show="pricing === 'monthly'" class="mb-1">
            <span class="text-4xl font-extrabold">$59</span>
          </div>
          <div x-show="pricing === 'annual'" class="mb-1">
            <span class="text-4xl font-extrabold">$349</span>
          </div>
          <p
            x-show="pricing === 'monthly'"
            class="text-sm font-medium text-zinc-600 dark:text-zinc-400"
          >
            per month
          </p>
          <p
            x-show="pricing === 'annual'"
            class="text-sm font-medium text-zinc-600 dark:text-zinc-400"
          >
            per year
          </p>
        </div>
        <div
          class="flex justify-center bg-zinc-50 px-6 py-8 text-zinc-950 dark:bg-zinc-800/25 dark:text-zinc-50"
        >
          <ul class="space-y-4 text-sm lg:text-base">
            <li class="flex items-center gap-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                class="hi-mini hi-check size-6 text-teal-600 dark:text-teal-500"
              >
                <path
                  fill-rule="evenodd"
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              <span><strong>Unlimited</strong> projects</span>
            </li>
            <li class="flex items-center gap-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                class="hi-mini hi-check size-6 text-teal-600 dark:text-teal-500"
              >
                <path
                  fill-rule="evenodd"
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              <span><strong>500</strong> paying customers</span>
            </li>
            <li class="flex items-center gap-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                class="hi-mini hi-check size-6 text-teal-600 dark:text-teal-500"
              >
                <path
                  fill-rule="evenodd"
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              <span><strong>50GB</strong> SSD storage</span>
            </li>
            <li class="flex items-center gap-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                class="hi-mini hi-check size-6 text-teal-600 dark:text-teal-500"
              >
                <path
                  fill-rule="evenodd"
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              <span><strong>20TB</strong> bandwidth</span>
            </li>
            <li class="flex items-center gap-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                class="hi-mini hi-check size-6 text-teal-600 dark:text-teal-500"
              >
                <path
                  fill-rule="evenodd"
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              <span><strong>24/7</strong> email support</span>
            </li>
          </ul>
        </div>
        <div class="p-6 text-center">
          <a
            href="javascript:void(0)"
            class="inline-flex w-full max-w-64 items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-4 py-3 text-sm font-medium leading-5 text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500/50 active:border-zinc-700 active:bg-zinc-700 dark:border-zinc-700/50 dark:bg-zinc-700/50 dark:ring-zinc-700/50 dark:hover:border-zinc-700 dark:hover:bg-zinc-700/75 dark:active:border-zinc-700/50 dark:active:bg-zinc-700/50"
          >
            Get Started
          </a>
        </div>
      </div>
      <!-- END Unlimited Plan -->
    </div>
    <!-- END Pricing Plans -->
  </div>
</div>
<!-- END Pricing Switch -->