Tailwind Pricing Plan Card with CTA Buttons

<article class="relative ring-1 ring-black/5 overflow-hidden transition hover:shadow-lg bg-white rounded-2xl pt-6 pr-6 pb-6 pl-6 shadow-sm">
          

          <div class="flex items-center justify-between">
            <div class="text-sm font-medium text-gray-600 tracking-tight">Solo Creator</div>
            <div class="text-xs uppercase text-gray-500 flex items-center gap-1.5">
              <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-yellow-100 text-yellow-700 ring-1 ring-yellow-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap w-3.5 h-3.5"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
              </span>
              Popular
            </div>
          </div>

          <div class="mt-3">
            <h2 class="text-2xl sm:text-3xl md:text-2xl font-semibold tracking-tight">Designed for independent makers</h2>
            <p class="text-sm text-gray-600 mt-1">Everything you need to ship fast and look professional.</p>
          </div>

          <div class="mt-5 flex items-baseline gap-2">
            <span id="priceAValue" class="text-5xl font-semibold tracking-tight">$29</span>
            <span id="priceADuration" class="text-sm text-gray-600" aria-live="polite">/mo</span>
          </div>

          <div class="mt-4 flex items-center gap-3">
            <button class="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-gray-900 text-white shadow-sm hover:bg-black transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/40" aria-label="Start Solo plan">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="rocket" class="lucide lucide-rocket w-4 h-4"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" class=""></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" class=""></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" class=""></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" class=""></path></svg>
              <span class="font-medium">Start Solo</span>
            </button>
            <button class="inline-flex items-center gap-2 px-4 py-3 rounded-xl bg-white text-gray-900 ring-1 ring-black/10 hover:bg-gray-50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20" aria-label="View features">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="list-checks" class="lucide lucide-list-checks w-4 h-4"><path d="m3 17 2 2 4-4" class=""></path><path d="m3 7 2 2 4-4" class=""></path><path d="M13 6h8" class=""></path><path d="M13 12h8" class=""></path><path d="M13 18h8" class=""></path></svg>
              <span class="text-sm font-medium">View features</span>
            </button>
          </div>

          <div class="mt-5 h-px bg-gray-100"></div>

          <ul class="mt-4 space-y-2.5 text-gray-800 text-sm">
            <li class="flex items-start gap-2.5">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4.5 h-4.5 text-emerald-600 mt-0.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              For solo creators, freelancers &amp; consultants
            </li>
            <li class="flex items-start gap-2.5">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4.5 h-4.5 text-emerald-600 mt-0.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              Web editor, mockups &amp; asset library (5,000+ items)
            </li>
            <li class="flex items-start gap-2.5">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4.5 h-4.5 text-emerald-600 mt-0.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              Unlimited drafts &amp; 10 active projects
            </li>
            <li class="flex items-start gap-2.5">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4.5 h-4.5 text-emerald-600 mt-0.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              AI assist for copy &amp; layout (200 credits/mo)
            </li>
            <li class="flex items-start gap-2.5">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4.5 h-4.5 text-emerald-600 mt-0.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              Email support 24/7
            </li>
          </ul>
        </article>