Three-Tier Pricing Section with Tailwind CSS

<section class="relative pt-24 pb-24">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Section Header -->
    <div class="text-center max-w-3xl mx-auto mb-16">
      <div class="inline-flex gap-2 text-xs text-zinc-300 bg-white/5 border-white/10 border rounded-full pt-1 pr-3 pb-1 pl-3 items-center mb-6">
        <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-3.5 w-3.5">
          <circle cx="8" cy="21" r="1" class=""></circle>
          <circle cx="19" cy="21" r="1" class=""></circle>
          <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" class=""></path>
        </svg>
        <span class="font-medium font-sans">Pricing</span>
      </div>
      <h2 class="text-4xl sm:text-5xl font-light tracking-tighter font-geist text-white mb-4">Simple, transparent pricing</h2>
      <p class="text-lg text-zinc-300 font-sans">Start building for free, then add a site plan to go live. Account plans unlock additional features.</p>
    </div>

    <!-- Pricing Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
      <!-- Starter Plan -->
      <div class="relative group rounded-2xl bg-zinc-900/50 border border-white/10 backdrop-blur-sm p-8">
        <div class="mb-6">
          <h3 class="text-xl font-semibold text-white font-geist">Starter</h3>
          <p class="text-zinc-400 text-sm mt-2 font-sans">Perfect for personal projects and small teams getting started.</p>
        </div>
        
        <div class="mb-8">
          <div class="flex items-baseline gap-1">
            <span class="text-4xl font-light text-white font-geist">$0</span>
            <span class="text-zinc-400 font-sans">/month</span>
          </div>
          <p class="text-xs text-zinc-400 mt-1 font-sans">Free forever</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">Up to 5 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">Unlimited personal projects</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">Basic analytics</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">Email 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">Community integrations</span>
          </li>
        </ul>

        <button class="w-full bg-white/10 hover:bg-white/20 text-white border border-white/20 hover:border-white/30 rounded-lg py-3 px-4 text-sm font-medium transition-all duration-200 font-sans">
          Get Started
        </button>
      </div>

      <!-- Pro Plan - Featured -->
      <div class="relative group rounded-2xl bg-zinc-900/50 border-2 border-white/30 backdrop-blur-sm p-8">
        <!-- 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>

      <!-- Enterprise Plan -->
      <div class="relative group rounded-2xl bg-zinc-900/50 border border-white/10 backdrop-blur-sm p-8">
        <div class="mb-6">
          <h3 class="text-xl font-semibold text-white font-geist">Enterprise</h3>
          <p class="text-zinc-400 text-sm mt-2 font-sans">Advanced security and compliance features for large organizations.</p>
        </div>
        
        <div class="mb-8">
          <div class="flex items-baseline gap-1">
            <span class="text-4xl font-light text-white font-geist">$49</span>
            <span class="text-zinc-400 font-sans">/member/month</span>
          </div>
          <p class="text-xs text-zinc-400 mt-1 font-sans">Custom pricing available</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 Pro</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">SOC2 compliance</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">SSO &amp; advanced security</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">Dedicated success manager</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 integrations</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">99.9% SLA guarantee</span>
          </li>
        </ul>

        <button class="w-full bg-white/10 hover:bg-white/20 text-white border border-white/20 hover:border-white/30 rounded-lg py-3 px-4 text-sm font-medium transition-all duration-200 font-sans">
          Contact Sales
        </button>
      </div>
    </div>

    <!-- Trust indicators -->
    
  </div>
</section>