Pricing Boxes

<!--
  Day 8: Pricing boxes

  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
-->

<!-- Pricing Boxes -->
<div class="relative mx-auto w-full max-w-sm md:max-w-3xl">
  <div class="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-8">
    <div class="rounded-xl bg-white ring-1 shadow-xl ring-slate-900/5">
      <div class="text-center">
        <div class="p-6">
          <h4 class="text-2xl font-extrabold">Basic</h4>
          <p class="text-sm font-medium text-slate-500">For one project</p>
        </div>
        <div class="bg-slate-50 px-6 py-5 text-center">
          <p class="mb-0.5 text-4xl font-bold text-slate-800">
            <span class="align-top text-lg font-medium text-slate-500">$</span
            >19
          </p>
          <p class="text-sm font-medium text-slate-500">per month</p>
        </div>
      </div>
      <div class="p-6">
        <button
          type="button"
          class="block w-full rounded-xl bg-gray-700 p-3 text-center text-sm font-semibold text-white hover:bg-gray-800 active:bg-gray-700"
        >
          Get all access
        </button>
      </div>
    </div>
    <div class="relative rounded-xl bg-white ring-1 shadow-xl ring-slate-900/5">
      <div class="absolute top-0 right-2 -mt-1 text-orange-500">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="size-6"
        >
          <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="text-center">
        <div class="p-6">
          <h4 class="text-2xl font-extrabold text-blue-600">Developer</h4>
          <p class="text-sm font-medium text-slate-500">
            For unlimited projects
          </p>
        </div>
        <div class="bg-slate-50 px-6 py-5 text-center">
          <p class="mb-0.5 text-4xl font-bold text-slate-800">
            <span class="align-top text-lg font-medium text-slate-500">$</span
            >39
          </p>
          <p class="text-sm font-medium text-slate-500">per month</p>
        </div>
      </div>
      <div class="p-6">
        <button
          type="button"
          class="block w-full rounded-xl bg-blue-600 p-3 text-center text-sm font-semibold text-white hover:bg-blue-700 active:bg-blue-600"
        >
          Get all access
        </button>
      </div>
    </div>
    <div class="rounded-xl bg-white ring-1 shadow-xl ring-slate-900/5">
      <div class="text-center">
        <div class="p-6">
          <h4 class="text-2xl font-extrabold">Lifetime</h4>
          <p class="text-sm font-medium text-slate-500">
            For unlimited projects
          </p>
        </div>
        <div class="bg-slate-50 px-6 py-5 text-center">
          <p class="mb-0.5 text-4xl font-bold text-slate-800">
            <span class="align-top text-lg font-medium text-slate-500">$</span
            >249
          </p>
          <p class="text-sm font-medium text-slate-500">one-time payment</p>
        </div>
      </div>
      <div class="p-6">
        <button
          type="button"
          class="block w-full rounded-xl bg-gray-600 p-3 text-center text-sm font-semibold text-white hover:bg-gray-700 active:bg-gray-600"
        >
          Get all access
        </button>
      </div>
    </div>
  </div>
</div>
<!-- END Pricing Boxes -->