Tailwind Pricing Plan Card with CTA

<div class="ring-1 ring-white/10 shadow-[0_10px_60px_-15px_rgba(0,0,0,0.6)] overflow-hidden bg-white/5 rounded-3xl backdrop-blur-xl">
      <div class="flex items-center justify-between px-5 py-4 sm:px-6">
        <div class="flex items-center gap-3">
          <span class="text-xs text-slate-300/80 font-geist">01</span>
          <span class="flex items-center gap-1">
            <span class="h-1.5 w-1.5 rounded-full bg-white/90"></span>
            <span class="h-1.5 w-1.5 rounded-full bg-white/30"></span>
            <span class="h-1.5 w-1.5 rounded-full bg-white/30"></span>
          </span>
        </div>
        <div class="flex items-center gap-2 text-xs text-slate-300/80 font-geist">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock h-3.5 w-3.5 text-slate-300/80"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>
          Turnaround<span class="font-medium text-white/90 font-geist">&nbsp;≈ 2 weeks</span>
        </div>
      </div>
      <div class="sm:px-6 pr-5 pb-6 pl-5">
        <div class="flex items-start justify-between">
          <div class="">
            <h4 class="text-2xl sm:text-3xl tracking-tight text-white font-geist font-light">Starter</h4>
            <p class="mt-1 text-sm text-slate-300/80 font-geist">Great for small sites and personal projects</p>
          </div>
          <div class="text-right">
            <div class="text-xl sm:text-2xl text-white font-geist font-medium">S$2,100</div>
            <div class="text-[11px] text-slate-300/80 font-geist">fixed project</div>
          </div>
        </div>

        <a href="#contact" class="mt-5 inline-flex items-center gap-2 rounded-full bg-white text-slate-900 px-4 py-2 text-sm font-geist font-medium hover:bg-white/90 transition shadow">
          Start now
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3.5 w-3.5"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg>
        </a>

        <div class="mt-6 rounded-2xl bg-black/20 ring-1 ring-white/10 p-5">
          <p class="text-xs text-white font-geist mb-3">What’s included:</p>
          <ul class="space-y-2">
            <li class="flex items-start gap-2 text-sm text-slate-200 font-geist">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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 h-4 w-4 text-emerald-300 mt-0.5"><path d="M20 6 9 17l-5-5"></path></svg>
              Core design system access
            </li>
            <li class="flex items-start gap-2 text-sm text-slate-200 font-geist">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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 h-4 w-4 text-emerald-300 mt-0.5"><path d="M20 6 9 17l-5-5"></path></svg>
              Up to 5 pages/screens
            </li>
            <li class="flex items-start gap-2 text-sm text-slate-200 font-geist">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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 h-4 w-4 text-emerald-300 mt-0.5"><path d="M20 6 9 17l-5-5"></path></svg>
              One revision cycle
            </li>
            <li class="flex items-start gap-2 text-sm text-slate-200 font-geist">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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 h-4 w-4 text-emerald-300 mt-0.5"><path d="M20 6 9 17l-5-5"></path></svg>
              Basic handoff (Figma + exports)
            </li>
            <li class="flex items-start gap-2 text-sm text-slate-200 font-geist">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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 h-4 w-4 text-emerald-300 mt-0.5"><path d="M20 6 9 17l-5-5"></path></svg>
              Email support
            </li>
          </ul>
        </div>
      </div>
    </div>