Tailwind Starter Pricing Plan Card

<article class="relative overflow-hidden sm:p-6 bg-gradient-to-b from-zinc-900/70 to-zinc-950/80 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5 backdrop-blur-xl">
      <!-- Top meta -->
      <div class="flex items-center justify-between text-xs">
        <div class="inline-flex items-center gap-2 text-zinc-400">
          <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-zinc-950/80 ring-1 ring-white/10 text-zinc-300 backdrop-blur">01</span>
          <div class="flex items-center gap-1">
            <span class="h-1.5 w-1.5 rounded-full bg-indigo-500/80"></span>
            <span class="h-1.5 w-1.5 rounded-full bg-indigo-500/40"></span>
            <span class="h-1.5 w-1.5 rounded-full bg-indigo-500/20"></span>
          </div>
        </div>
        <div class="inline-flex items-center gap-1 text-zinc-400">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
          <span class="font-geist">Setup in 24 hours</span>
        </div>
      </div>

      <!-- Core -->
      <div class="mt-5 flex items-start justify-between">
        <div class="">
          <h3 class="text-2xl sm:text-3xl text-white font-geist font-medium tracking-tight">Starter</h3>
          <p class="mt-1 text-sm text-zinc-400 font-geist">Perfect for individual developers and small projects.</p>
        </div>
        <div class="text-right">
          <p class="text-2xl sm:text-3xl text-white font-geist font-medium tracking-tight">$29</p>
          <p class="text-xs text-zinc-500 font-geist">per month</p>
        </div>
      </div>

      <button class="mt-5 inline-flex items-center justify-center gap-2 h-11 w-full rounded-full bg-white/90 text-zinc-900 text-sm font-normal hover:bg-white transition backdrop-blur font-geist">
        Get Started
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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-4 w-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
      </button>

      <!-- Features -->
      <div class="mt-6">
        <p class="text-xs text-zinc-400 font-geist">Everything you need to start:</p>
        <ul class="mt-3 space-y-3">
          <li class="flex items-start gap-3">
            <span class="mt-0.5 h-5 w-5 rounded-full bg-zinc-900/70 border border-white/10 flex items-center justify-center backdrop-blur">
              <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-3.5 w-3.5 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            </span>
            <span class="text-sm text-zinc-300 font-geist">5 active projects with full version control</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="mt-0.5 h-5 w-5 rounded-full bg-zinc-900/70 border border-white/10 flex items-center justify-center backdrop-blur">
              <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-3.5 w-3.5 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            </span>
            <span class="text-sm text-zinc-300 font-geist">10GB storage and priority CDN</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="mt-0.5 h-5 w-5 rounded-full bg-zinc-900/70 border border-white/10 flex items-center justify-center backdrop-blur">
              <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-3.5 w-3.5 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            </span>
            <span class="text-sm text-zinc-300 font-geist">Community support and knowledge base</span>
          </li>
        </ul>
      </div>
    </article>