Responsive Three-Tier Pricing Section (Tailwind)

<section class="relative z-10">
  <div class="max-w-6xl sm:px-6 lg:px-8 mr-auto ml-auto pt-20 pr-4 pb-20 pl-4">
    <div class="text-center space-y-4 mb-16">
      <div class="mb-2">
        <span class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-zinc-200 backdrop-blur font-sans">
          <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" class="h-3.5 w-3.5 text-violet-300"><rect width="20" height="14" x="2" y="5" rx="2" class=""></rect><line x1="2" x2="22" y1="10" y2="10" class=""></line></svg>
          Simple, transparent pricing
        </span>
      </div>
      <h2 class="text-4xl sm:text-5xl md:text-6xl tracking-tight text-white font-bricolage font-light">
        Plans that scale with your team
      </h2>
      <p class="max-w-2xl mx-auto text-lg text-zinc-300 font-sans">
        Start free, upgrade when you need more. All plans include end-to-end encryption and unlimited message history.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
      <!-- Free Plan -->
      <div class="ring-1 ring-white/10 bg-white/5 rounded-3xl p-8 backdrop-blur">
        <div class="space-y-6">
          <div class="">
            <h3 class="text-xl font-semibold text-white tracking-tight font-sans">Starter</h3>
            <p class="text-sm text-zinc-400 mt-1 font-sans">Perfect for small teams getting started</p>
          </div>
          <div class="flex items-baseline gap-1">
            <span class="text-4xl font-light tracking-tight text-white font-bricolage">$0</span>
            <span class="text-sm text-zinc-400 font-sans">per month</span>
          </div>
          <button class="w-full inline-flex items-center justify-center gap-2 rounded-lg border border-white/20 bg-white/5 px-4 py-3 text-sm font-medium text-white hover:bg-white/10 transition-colors font-sans">
            Get started free
            <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" class="h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
          </button>
          <div class="space-y-3">
            <div class="flex items-center gap-2">
              <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" class="h-4 w-4 text-emerald-400"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm text-zinc-300 font-sans">Up to 5 team members</span>
            </div>
            <div class="flex items-center gap-2">
              <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" class="h-4 w-4 text-emerald-400"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm text-zinc-300 font-sans">Unlimited messages</span>
            </div>
            <div class="flex items-center gap-2">
              <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" class="h-4 w-4 text-emerald-400"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm text-zinc-300 font-sans">10GB file storage</span>
            </div>
            <div class="flex items-center gap-2">
              <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" class="h-4 w-4 text-emerald-400"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm text-zinc-300 font-sans">Basic AI recaps</span>
            </div>
            <div class="flex items-center gap-2">
              <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" class="h-4 w-4 text-emerald-400"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm text-zinc-300 font-sans">End-to-end encryption</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Pro Plan -->
      <div class="relative ring-1 ring-violet-500/50 bg-gradient-to-b from-violet-500/10 to-indigo-500/10 rounded-3xl p-8 backdrop-blur shadow-2xl">
        <div class="absolute -top-3 left-1/2 -translate-x-1/2">
          <span class="inline-flex items-center gap-1.5 rounded-full bg-gradient-to-r from-violet-500 to-indigo-600 px-3 py-1 text-xs font-medium text-white shadow-lg font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path></svg>
            Most popular
          </span>
        </div>
        <div class="space-y-6">
          <div class="">
            <h3 class="text-xl font-semibold text-white tracking-tight font-sans">Pro</h3>
            <p class="text-sm text-zinc-400 mt-1 font-sans">Everything you need for growing teams</p>
          </div>
          <div class="flex items-baseline gap-1">
            <span class="text-4xl font-light tracking-tight text-white font-bricolage">$8</span>
            <span class="text-sm text-zinc-400 font-sans">per user/month</span>
          </div>
          <button class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-violet-500 to-indigo-600 px-4 py-3 text-sm font-medium text-white hover:opacity-90 transition-opacity shadow-lg font-sans">
            Start free trial
            <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" class="h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
          </button>
          <div class="space-y-3">
            <div class="flex items-center gap-2">
              <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" class="h-4 w-4 text-emerald-400"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm text-zinc-300 font-sans">Unlimited team members</span>
            </div>
            <div class="flex items-center gap-2">
              <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" class="h-4 w-4 text-emerald-400"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm text-zinc-300 font-sans">100GB file storage</span>
            </div>
            <div class="flex items-center gap-2">
              <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" class="h-4 w-4 text-emerald-400"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm text-zinc-300 font-sans">Advanced AI features</span>
            </div>
            <div class="flex items-center gap-2">
              <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" class="h-4 w-4 text-emerald-400"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm text-zinc-300 font-sans">Voice &amp; video calls</span>
            </div>
            <div class="flex items-center gap-2">
              <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" class="h-4 w-4 text-emerald-400"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm text-zinc-300 font-sans">Priority support</span>
            </div>
            <div class="flex items-center gap-2">
              <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" class="h-4 w-4 text-emerald-400"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm text-zinc-300 font-sans">Custom integrations</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Enterprise Plan -->
      <div class="ring-1 ring-white/10 bg-white/5 rounded-3xl p-8 backdrop-blur">
        <div class="space-y-6">
          <div class="">
            <h3 class="text-xl font-semibold text-white tracking-tight font-sans">Enterprise</h3>
            <p class="text-sm text-zinc-400 mt-1 font-sans">Advanced security and admin controls</p>
          </div>
          <div class="flex items-baseline gap-1">
            <span class="text-4xl font-light tracking-tight text-white font-bricolage">$24</span>
            <span class="text-sm text-zinc-400 font-sans">per user/month</span>
          </div>
          <button class="w-full inline-flex items-center justify-center gap-2 rounded-lg border border-white/20 bg-white/5 px-4 py-3 text-sm font-medium text-white hover:bg-white/10 transition-colors font-sans">
            Contact sales
            <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" class="h-4 w-4"><path d="M22 16.92A7 7 0 1 1 16.92 22c.15 0 .29-.01.43-.03L22 24Z" class=""></path><path d="M10.5 7.5a4 4 0 1 1 0 8" class=""></path></svg>
          </button>
          <div class="space-y-3">
            <div class="flex items-center gap-2">
              <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" class="h-4 w-4 text-emerald-400"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm text-zinc-300 font-sans">Everything in Pro</span>
            </div>
            <div class="flex items-center gap-2">
              <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" class="h-4 w-4 text-emerald-400"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm text-zinc-300 font-sans">Unlimited file storage</span>
            </div>
            <div class="flex items-center gap-2">
              <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" class="h-4 w-4 text-emerald-400"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm text-zinc-300 font-sans">Advanced admin controls</span>
            </div>
            <div class="flex items-center gap-2">
              <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" class="h-4 w-4 text-emerald-400"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm text-zinc-300 font-sans">SSO &amp; compliance</span>
            </div>
            <div class="flex items-center gap-2">
              <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" class="h-4 w-4 text-emerald-400"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm text-zinc-300 font-sans">Dedicated support</span>
            </div>
            <div class="flex items-center gap-2">
              <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" class="h-4 w-4 text-emerald-400"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm text-zinc-300 font-sans">99.9% SLA uptime</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Enterprise CTA -->
    <div class="mt-12 text-center">
      <p class="text-sm text-zinc-400 font-sans">Need something custom? <a href="#" class="text-violet-300 hover:text-violet-200">Let's talk about your requirements</a></p>
    </div>
  </div>
</section>