Pro Pricing Plan Card with Highlight Badge

<div class="relative ring-1 ring-violet-500/50 bg-gradient-to-b from-violet-500/10 to-indigo-500/10 rounded-3xl pt-8 pr-8 pb-8 pl-8 shadow-2xl backdrop-blur">
        <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>