Dark Tailwind Pricing Section with Free & Pro Plans

<div class="bg-neutral-900/30 ring-neutral-800 ring-1 rounded-xl pt-8 pr-8 pb-8 pl-8">
  <!-- Header -->
  <header class="flex items-center justify-between">
    <div class="flex items-center gap-4">
      
      <div class="hidden sm:flex gap-3 text-sm text-neutral-300 items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles h-5 w-5 text-sky-300"><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><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
        <span class="font-medium">Your AI-powered workspace companion</span>
      </div>
    </div>
    <nav class="hidden md:flex items-center gap-8 text-sm text-neutral-400">
      <a class="hover:text-neutral-200 transition-colors duration-200 font-medium" href="#">Create</a>
      <a class="hover:text-neutral-200 transition-colors duration-200 font-medium" href="#">Collaborate</a>
      <a class="hover:text-neutral-200 transition-colors duration-200 font-medium" href="#">Automate</a>
    </nav>
  </header>

  <!-- Intro -->
  <section class="mt-10 md:mt-14">
    <div class="flex items-start justify-between gap-6">
      <div class="max-w-3xl text-center">
          <h2 class="sm:text-5xl text-3xl font-light text-white tracking-tighter font-merriweather text-left" style="font-variation-settings: &quot;wght&quot; 600;">
            Simple pricing for every team
          </h2>
          <p class="sm:text-lg text-base text-slate-300/85 text-left mt-4" style="transition: outline 0.1s ease-in-out;">Start free and scale as you grow with Mira by your side.</p>
        </div>
    </div>
  </section>

  <!-- Main Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-10">
  <!-- Free Plan -->
  <div class="group relative ring-1 ring-white/10 md:p-7 transition-all duration-300 hover:ring-white/20 bg-neutral-900/60 rounded-2xl pt-6 pr-6 pb-6 pl-6 backdrop-blur-md">
    <div class="flex items-start justify-between">
      <div class="space-y-1">
        <h3 class="text-lg font-semibold text-white tracking-tight">Free</h3>
        <span class="text-xs text-slate-400 bg-neutral-800/60 px-2 py-1 rounded-md">Forever free</span>
      </div>
    </div>
    <div class="mt-6 flex items-end gap-2">
      <span class="sm:text-7xl text-6xl font-light text-white tracking-tight font-merriweather">$0</span>
      <span class="text-slate-300/85 text-sm mb-1">/month</span>
    </div>
    <button class="relative inline-flex items-center justify-center gap-2 overflow-hidden shadow-[0_0_0_1px_rgba(56,189,248,0.25),inset_0_0_0_1px_rgba(255,255,255,0.08)] transition-all duration-300 hover:ring-sky-400/60 hover:shadow-[0_0_0_1px_rgba(56,189,248,0.35),0_40px_80px_rgba(56,189,248,0.18)] hover:bg-sky-500/10 ring-sky-400/30 ring-1 text-base font-semibold text-white tracking-tight bg-sky-500/10 border-0 rounded-full pt-3 pr-6 pb-3 pl-6 mt-6 w-full">
      <span class="relative z-[1]">Start with Mira</span>
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-full opacity-80 hover:opacity-100 transition-opacity duration-300" style="box-shadow: 0 0 0 1px rgba(56,189,248,0.45), 0 18px 60px rgba(56,189,248,0.25); background: radial-gradient(140% 160% at 50% -20%, rgba(56,189,248,0.22) 0%, rgba(56,189,248,0.08) 35%, rgba(56,189,248,0.00) 60%);"></span>
      <span aria-hidden="true" class="pointer-events-none absolute inset-[1px] rounded-full" style="background: radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0) 60%), radial-gradient(90% 80% at 50% 120%, rgba(56,189,248,0.18) 0%, rgba(56,189,248,0) 60%);"></span>
    </button>
    <ul class="mt-6 space-y-3 text-sm text-slate-300/90">
      <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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-sky-200"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
        Basic AI assistance
      </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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-sky-200"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
        Up to 50 requests/day
      </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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-sky-200"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
        Essential collaboration tools
      </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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-sky-200"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
        Simple automations
      </li>
    </ul>
  </div>

  <!-- Premium Plan -->
  <div class="group relative rounded-2xl bg-neutral-900/60 ring-1 ring-sky-400/30 p-8 md:p-10 backdrop-blur-md transition-all duration-300 hover:ring-sky-400/50">
    <div class="flex items-start justify-between">
      <div class="space-y-2">
        <h3 class="text-xl font-semibold text-white tracking-tight">Pro Plan</h3>
        <span class="text-xs text-sky-200 bg-sky-500/20 px-3 py-1 rounded-md ring-1 ring-sky-400/30">Most Popular</span>
      </div>
      <div class="flex items-center gap-3 text-xs text-slate-200/90">
        <span>Monthly</span>
        <span class="relative inline-flex items-center h-6 w-12 rounded-full bg-black/60 ring-1 ring-white/10 p-0.5">
          <span class="h-5 w-5 rounded-full bg-white shadow-[0_1px_0_rgba(0,0,0,0.25)]"></span>
        </span>
        <span>Yearly 20% off</span>
      </div>
    </div>
    <div class="mt-8 flex items-end gap-3">
      <span class="sm:text-7xl text-6xl font-light text-white tracking-tight font-merriweather">$19</span>
      <span class="text-slate-200/90 text-sm mb-2">/per month</span>
    </div>
    <button class="relative inline-flex items-center justify-center gap-2 overflow-hidden shadow-[0_0_0_1px_rgba(56,189,248,0.25),inset_0_0_0_1px_rgba(255,255,255,0.08)] transition-all duration-300 hover:ring-sky-400/60 hover:shadow-[0_0_0_1px_rgba(56,189,248,0.35),0_40px_80px_rgba(56,189,248,0.18)] hover:bg-sky-500/10 ring-sky-400/30 ring-1 text-base font-semibold text-white tracking-tight bg-sky-500/10 border-0 rounded-full pt-3 pr-6 pb-3 pl-6 mt-6 w-full">
      <span class="relative z-[1]">Upgrade to Pro</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="relative z-[1] w-4 h-4 text-sky-100 transition-transform duration-300 group-hover:translate-x-0.5">
        <path d="M5 12h14" class=""></path>
        <path d="m12 5 7 7-7 7" class=""></path>
      </svg>
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-full opacity-80 hover:opacity-100 transition-opacity duration-300" style="box-shadow: 0 0 0 1px rgba(56,189,248,0.45), 0 18px 60px rgba(56,189,248,0.25); background: radial-gradient(140% 160% at 50% -20%, rgba(56,189,248,0.22) 0%, rgba(56,189,248,0.08) 35%, rgba(56,189,248,0.00) 60%);"></span>
      <span aria-hidden="true" class="pointer-events-none absolute inset-[1px] rounded-full" style="background: radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0) 60%), radial-gradient(90% 80% at 50% 120%, rgba(56,189,248,0.18) 0%, rgba(56,189,248,0) 60%);"></span>
    </button>
    <ul class="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-4 text-sm text-slate-200/90">
      <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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-sky-200"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
        Everything from Free +
      </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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-sky-200"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
        Unlimited requests
      </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="1.5" stroke-linecap="round" stroke-linejoin"round"="" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-sky-200"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
        Advanced collaboration tools
      </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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-sky-200"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
        Complex automations
      </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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-sky-200"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
        Priority support
      </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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-sky-200"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
        Custom integrations
      </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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-sky-200"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
        Team workspace
      </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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-sky-200"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
        Analytics dashboard
      </li>
    </ul>
  </div>
</div>

<!-- FAQ Section -->

</div>