Tailwind Pro Plan Pricing Card

<div class="relative group bg-zinc-900/50 border-white/30 border-2 rounded-2xl pt-8 pr-8 pb-8 pl-8 backdrop-blur-sm">
        <!-- Popular badge -->
        <div class="absolute -top-3 left-1/2 transform -translate-x-1/2">
          <span class="bg-white text-black text-xs font-semibold px-3 py-1 rounded-full font-sans">Most Popular</span>
        </div>

        <div class="mb-6">
          <h3 class="text-xl font-semibold text-white font-geist">Pro</h3>
          <p class="text-zinc-400 text-sm mt-2 font-sans">For growing teams that need more power and collaboration features.</p>
        </div>
        
        <div class="mb-8">
          <div class="flex items-baseline gap-1">
            <span class="text-4xl font-light text-white font-geist">$19</span>
            <span class="text-zinc-400 font-sans">/member/month</span>
          </div>
          <p class="text-xs text-zinc-400 mt-1 font-sans">Billed annually or $24 monthly</p>
        </div>

        <ul class="space-y-3 mb-8 text-sm">
          <li class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-emerald-400 flex-shrink-0">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            <span class="text-zinc-300 font-sans">Everything in Starter</span>
          </li>
          <li class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-emerald-400 flex-shrink-0">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            <span class="text-zinc-300 font-sans">Unlimited team members</span>
          </li>
          <li class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-emerald-400 flex-shrink-0">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            <span class="text-zinc-300 font-sans">Advanced analytics &amp; insights</span>
          </li>
          <li class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-emerald-400 flex-shrink-0">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            <span class="text-zinc-300 font-sans">Custom workflows &amp; automation</span>
          </li>
          <li class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-emerald-400 flex-shrink-0">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            <span class="text-zinc-300 font-sans">Priority support</span>
          </li>
          <li class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-emerald-400 flex-shrink-0">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            <span class="text-zinc-300 font-sans">Advanced integrations</span>
          </li>
        </ul>

        <button type="button" role="button" aria-label="Start Pro Trial" class="group relative inline-flex w-full shadow-[0_8px_16px_-4px_rgba(255,255,255,0.05)] hover:shadow-[0_12px_20px_-6px_rgba(255,255,255,0.1)] transition duration-300 ease-out select-none cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/60 transform-gpu hover:-translate-y-0.5 text-white rounded-lg pt-[1px] pr-[1px] pb-[1px] pl-[1px] items-center justify-center" style="background-image: linear-gradient(144deg,rgba(255,255,255,0.3), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.2));">
          <span class="flex items-center justify-center gap-2 leading-none w-full h-full transition-colors duration-300 group-hover:bg-black/50 font-medium bg-black/80 rounded-lg pt-3 pr-4 pb-3 pl-4">
            <span class="text-sm font-sans">Start Free Trial</span>
          </span>
        </button>
      </div>