Interactive Pro Plan Pricing Card with Toggle

<div class="relative overflow-hidden transition-all duration-300 hover:border-emerald-400/50 hover:shadow-[0_0_30px_rgba(16,185,129,0.2)] group cursor-pointer bg-black/40 border-emerald-400/30 border rounded-3xl backdrop-blur-xl">
        <div class="pointer-events-none absolute inset-0 transition-all duration-300 group-hover:opacity-100" style="background: radial-gradient(120% 120% at 90% 10%, rgba(16,185,129,0.35), rgba(16,185,129,0.15) 40%, rgba(16,185,129,0.06) 60%, transparent 75%);"></div>
        <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-emerald-400/40 to-transparent opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="sm:p-8 pt-6 pr-6 pb-6 pl-6">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
              <h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white group-hover:text-emerald-50 transition-colors duration-300">Pro</h3>
              <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium text-emerald-900 bg-emerald-300/95 shadow-[0_0_20px_rgba(16,185,129,0.35)] group-hover:shadow-[0_0_25px_rgba(16,185,129,0.5)] transition-all duration-300">Popular</span>
            </div>
            <div class="flex items-center gap-2 text-xs text-slate-400">
              <span class="uppercase billing-label">Monthly</span>
              <button data-card-toggle="" class="relative inline-flex h-5 w-9 items-center rounded-full border border-emerald-400/40 bg-emerald-400/20 cursor-pointer transition-colors duration-200 hover:bg-emerald-400/25">
                <span class="absolute inset-0 rounded-full" style="background: linear-gradient(90deg, rgba(16,185,129,0.45), rgba(110,231,183,0.35));"></span>
                <span class="z-10 inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform duration-300" style="transform: translateX(4px);"></span>
              </button>
            </div>
          </div>

          <p class="mt-5 text-slate-300 group-hover:text-slate-200 transition-colors duration-300">Growing sites are</p>
          <div class="mt-1 flex items-baseline gap-2">
            <span class="text-white text-3xl sm:text-4xl font-semibold tracking-tight group-hover:text-emerald-50 transition-colors duration-300">
              <span class="price" data-monthly="US$41" data-yearly="US$33">US$41</span>
            </span>
            <span class="text-slate-400 group-hover:text-slate-300 transition-colors duration-300">/month, per site</span>
          </div>

          <ul class="mt-6 space-y-3">
            <li class="flex items-start gap-3">
              <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/15 ring-1 ring-emerald-400/30 group-hover:bg-emerald-400/30 group-hover:ring-emerald-400/50 transition-all duration-300">
                <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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
              <span class="text-slate-300 text-[14.5px] sm:text-base group-hover:text-slate-200 transition-colors duration-300">10,000 pages</span>
            </li>
            <li class="flex items-start gap-3">
              <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/15 ring-1 ring-emerald-400/30 group-hover:bg-emerald-400/30 group-hover:ring-emerald-400/50 transition-all duration-300">
                <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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
              <span class="text-slate-300 text-[14.5px] sm:text-base group-hover:text-slate-200 transition-colors duration-300">100&nbsp;GB bandwidth</span>
            </li>
            <li class="flex items-start gap-3">
              <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/15 ring-1 ring-emerald-400/30 group-hover:bg-emerald-400/30 group-hover:ring-emerald-400/50 transition-all duration-300">
                <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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
              <span class="text-slate-300 text-[14.5px] sm:text-base group-hover:text-slate-200 transition-colors duration-300">10 CMS collections</span>
            </li>
          </ul>

          <button class="mt-8 w-full inline-flex items-center justify-center rounded-full px-5 py-3 text-sm font-medium text-black bg-emerald-400/95 hover:bg-emerald-400 transition-colors shadow-[0_0_20px_rgba(16,185,129,0.3)] group-hover:shadow-[0_0_25px_rgba(16,185,129,0.4)]">
            Get started
          </button>
        </div>
      </div>