Radio Group Pricing

<!--
  Day 59: Radio group pricing

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Radio Group Pricing -->
<div
  class="relative mx-auto w-full max-w-3xl rounded-xl bg-white/40 p-4 shadow-sm backdrop-blur-xs"
>
  <div class="space-y-4 rounded-lg bg-white p-4">
    <div class="grid grid-cols-1 gap-3 md:grid-cols-3">
      <label class="group relative flex">
        <input
          type="radio"
          class="peer absolute top-0 left-0 appearance-none opacity-0"
          id="radio_group1_a"
          name="radio_group1"
          checked
        />
        <span
          class="absolute top-0 right-0 bottom-0 z-10 flex items-start p-4 text-sky-600 opacity-0 peer-checked:opacity-100"
        >
          <svg
            class="hi-mini hi-check-circle inline-block size-5"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
              clip-rule="evenodd"
            />
          </svg>
        </span>
        <span
          class="relative flex grow rounded-lg border border-slate-200 p-4 group-hover:border-sky-500 peer-checked:border-sky-400 peer-checked:bg-sky-50 peer-focus:ring-4 peer-focus:ring-sky-50"
        >
          <span class="grow">
            <span class="mb-2 block pr-8 font-semibold">Starter</span>
            <span class="block border-y border-dashed border-slate-500/25 py-4">
              <span class="text-3xl font-bold">$29</span>
              <span class="text-slate-600 dark:text-slate-400">/month</span>
            </span>
            <span class="mt-4 -mr-8 block space-y-2.5">
              <span
                class="flex gap-1.5 text-sm text-slate-600 dark:text-slate-400"
              >
                <svg
                  class="hi-mini hi-check inline-block size-5 text-sky-500"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
                    clip-rule="evenodd"
                  />
                </svg>
                <span class="font-bold">50+</span> Components</span
              >
              <span
                class="flex gap-1.5 text-sm text-slate-600 dark:text-slate-400"
              >
                <svg
                  class="hi-mini hi-check inline-block size-5 text-sky-500"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
                    clip-rule="evenodd"
                  />
                </svg>
                <span class="font-bold">1</span> Project</span
              >
              <span
                class="flex gap-1.5 text-sm text-slate-600 dark:text-slate-400"
              >
                <svg
                  class="hi-mini hi-check inline-block size-5 text-sky-500"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
                    clip-rule="evenodd"
                  />
                </svg>
                <span class="font-bold">Basic</span> Support</span
              >
              <span
                class="flex gap-1.5 text-sm text-slate-600 dark:text-slate-400"
              >
                <svg
                  class="hi-mini hi-check inline-block size-5 text-sky-500"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
                    clip-rule="evenodd"
                  />
                </svg>
                <span class="font-bold">6 months</span> Updates</span
              >
            </span>
          </span>
        </span>
      </label>
      <label class="group relative flex">
        <input
          type="radio"
          class="peer absolute top-0 left-0 appearance-none opacity-0"
          id="radio_group1_b"
          name="radio_group1"
        />
        <span
          class="absolute top-0 right-0 bottom-0 z-10 flex items-start p-4 text-sky-600 opacity-0 peer-checked:opacity-100"
        >
          <svg
            class="hi-mini hi-check-circle inline-block size-5"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
              clip-rule="evenodd"
            />
          </svg>
        </span>
        <span
          class="relative flex grow rounded-lg border border-slate-200 p-4 group-hover:border-sky-500 peer-checked:border-sky-400 peer-checked:bg-sky-50 peer-focus:ring-4 peer-focus:ring-sky-50"
        >
          <span class="grow">
            <span class="mb-2 block pr-8 font-semibold">Pro</span>
            <span class="block border-y border-dashed border-slate-500/25 py-4">
              <span class="text-3xl font-bold">$79</span>
              <span class="text-slate-600 dark:text-slate-400">/month</span>
            </span>
            <span class="mt-4 -mr-8 block space-y-2.5">
              <span
                class="flex gap-1.5 text-sm text-slate-600 dark:text-slate-400"
              >
                <svg
                  class="hi-mini hi-check inline-block size-5 text-sky-500"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
                    clip-rule="evenodd"
                  />
                </svg>
                <span class="font-bold">100+</span> Components</span
              >
              <span
                class="flex gap-1.5 text-sm text-slate-600 dark:text-slate-400"
              >
                <svg
                  class="hi-mini hi-check inline-block size-5 text-sky-500"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
                    clip-rule="evenodd"
                  />
                </svg>
                <span class="font-bold">5</span> Projects</span
              >
              <span
                class="flex gap-1.5 text-sm text-slate-600 dark:text-slate-400"
              >
                <svg
                  class="hi-mini hi-check inline-block size-5 text-sky-500"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
                    clip-rule="evenodd"
                  />
                </svg>
                <span class="font-bold">Priority</span> Support</span
              >
              <span
                class="flex gap-1.5 text-sm text-slate-600 dark:text-slate-400"
              >
                <svg
                  class="hi-mini hi-check inline-block size-5 text-sky-500"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
                    clip-rule="evenodd"
                  />
                </svg>
                <span class="font-bold">1 year</span> Updates</span
              >
            </span>
          </span>
        </span>
      </label>
      <label class="group relative flex">
        <input
          type="radio"
          class="peer absolute top-0 left-0 appearance-none opacity-0"
          id="radio_group1_c"
          name="radio_group1"
        />
        <span
          class="absolute top-0 right-0 bottom-0 z-10 flex items-start p-4 text-sky-600 opacity-0 peer-checked:opacity-100"
        >
          <svg
            class="hi-mini hi-check-circle inline-block size-5"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
              clip-rule="evenodd"
            />
          </svg>
        </span>
        <span
          class="relative flex grow rounded-lg border border-slate-200 p-4 group-hover:border-sky-500 peer-checked:border-sky-400 peer-checked:bg-sky-50 peer-focus:ring-4 peer-focus:ring-sky-50"
        >
          <span class="grow">
            <span class="mb-2 block pr-8 font-semibold">Enterprise</span>
            <span class="block border-y border-dashed border-slate-500/25 py-4">
              <span class="text-3xl font-bold">$199</span>
              <span class="text-slate-600 dark:text-slate-400">/month</span>
            </span>
            <span class="mt-4 -mr-8 block space-y-2.5">
              <span
                class="flex gap-1.5 text-sm text-slate-600 dark:text-slate-400"
              >
                <svg
                  class="hi-mini hi-check inline-block size-5 text-sky-500"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
                    clip-rule="evenodd"
                  />
                </svg>
                <span class="font-bold">200+</span> Components</span
              >
              <span
                class="flex gap-1.5 text-sm text-slate-600 dark:text-slate-400"
              >
                <svg
                  class="hi-mini hi-check inline-block size-5 text-sky-500"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
                    clip-rule="evenodd"
                  />
                </svg>
                <span class="font-bold">Unlimited</span> Projects</span
              >
              <span
                class="flex gap-1.5 text-sm text-slate-600 dark:text-slate-400"
              >
                <svg
                  class="hi-mini hi-check inline-block size-5 text-sky-500"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
                    clip-rule="evenodd"
                  />
                </svg>
                <span class="font-bold">24/7</span> Support</span
              >
              <span
                class="flex gap-1.5 text-sm text-slate-600 dark:text-slate-400"
              >
                <svg
                  class="hi-mini hi-check inline-block size-5 text-sky-500"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
                    clip-rule="evenodd"
                  />
                </svg>
                <span class="font-bold">Lifetime</span> Updates</span
              >
            </span>
          </span>
        </span>
      </label>
    </div>
  </div>
</div>
<!-- END Radio Group Pricing -->