Compact Pricing Plan

<!--
  Day 6: Compact pricing plan

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

<!-- Compact Pricing Plan -->
<div
  class="relative mx-auto w-full max-w-xs rounded-xl bg-white ring-8 shadow-sm shadow-slate-500/10 ring-slate-900/5"
>
  <div class="text-center">
    <div class="p-6">
      <h4 class="mb-0.5 text-2xl font-extrabold">Pro Plan</h4>
      <p class="text-sm font-medium text-slate-500">
        Get the most complete package
      </p>
    </div>
    <div class="bg-slate-50 px-6 py-4 text-center">
      <p class="mb-1 text-3xl font-semibold text-slate-800">
        <span class="align-top text-lg font-medium text-slate-500">$</span>399
      </p>
      <p class="text-sm font-medium text-slate-500">one-time payment</p>
    </div>
    <div class="inline-flex flex-col space-y-3 p-6">
      <div
        class="flex items-center space-x-2 text-sm font-medium text-slate-700"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="hi-solid hi-check-circle inline-block size-6 text-green-500"
        >
          <path
            fill-rule="evenodd"
            d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
            clip-rule="evenodd"
          />
        </svg>
        <span><strong>200+</strong> Designs</span>
      </div>
      <div
        class="flex items-center space-x-2 text-sm font-medium text-slate-700"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="hi-solid hi-check-circle inline-block size-6 text-green-500"
        >
          <path
            fill-rule="evenodd"
            d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
            clip-rule="evenodd"
          />
        </svg>
        <span><strong>10+</strong> Templates</span>
      </div>
      <div
        class="flex items-center space-x-2 text-sm font-medium text-slate-700"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="hi-solid hi-check-circle inline-block size-6 text-green-500"
        >
          <path
            fill-rule="evenodd"
            d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
            clip-rule="evenodd"
          />
        </svg>
        <span><strong>1 year</strong> support</span>
      </div>
    </div>
  </div>
  <div class="border-t border-slate-200/75 p-6">
    <button
      type="button"
      class="block w-full rounded-xl bg-indigo-600 p-3 text-center text-sm font-semibold text-white hover:bg-indigo-700 active:bg-indigo-600"
    >
      Get access
    </button>
  </div>
</div>
<!-- END Compact Pricing Plan -->