Three-Tier Simple Pricing Grid

<div class="text-center max-w-7xl mr-auto ml-auto">
  <h2 class="text-3xl md:text-4xl font-semibold text-white mb-4 tracking-tight m-8">
    Simple Pricing
  </h2>
  <p class="text-slate-400 mb-16">
    Start creating for free, upgrade for power.
  </p>
  <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
    <div class="p-8 rounded-2xl border border-white/5 bg-slate-900/20 flex flex-col items-start text-left">
      <div class="text-cyan-400 font-medium mb-2">Starter</div>
      <div class="text-4xl font-semibold text-white mb-6 tracking-tight">
        $0
        <span class="text-lg text-slate-500 font-normal">/mo</span>
      </div>
      <ul class="flex-1 space-y-4 mb-8 text-slate-300 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" data-lucide="check"
            class="lucide lucide-check w-4 h-4 text-cyan-500">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          5 Generations per 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="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
            class="lucide lucide-check w-4 h-4 text-cyan-500">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Standard Quality (MP3)
        </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" data-lucide="check"
            class="lucide lucide-check w-4 h-4 text-cyan-500">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Personal License
        </li>
      </ul>
      <button class="w-full py-3 rounded-xl border border-white/10 text-white font-medium hover:bg-white/5 transition-colors">
              Get Started
            </button>
    </div>
    <div
      class="relative p-8 rounded-2xl border border-cyan-500/30 bg-slate-900/40 flex flex-col items-start text-left shadow-[0_0_30px_rgba(6,182,212,0.1)]">
      <div
        class="absolute top-0 right-0 bg-cyan-500 text-black text-xs font-bold px-3 py-1 rounded-bl-xl rounded-tr-xl">
        POPULAR
      </div>
      <div class="text-cyan-400 font-medium mb-2">Creator</div>
      <div class="text-4xl font-semibold text-white mb-6 tracking-tight">
        $29
        <span class="text-lg text-slate-500 font-normal">/mo</span>
      </div>
      <ul class="flex-1 space-y-4 mb-8 text-slate-300 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" data-lucide="check"
            class="lucide lucide-check w-4 h-4 text-cyan-500">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Unlimited Generations
        </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" data-lucide="check"
            class="lucide lucide-check w-4 h-4 text-cyan-500">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          High Quality (WAV)
        </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" data-lucide="check"
            class="lucide lucide-check w-4 h-4 text-cyan-500">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Commercial License
        </li>

      </ul>
      <button class="w-full py-3 rounded-xl bg-cyan-500 text-black font-bold hover:bg-cyan-400 transition-colors shadow-[0_0_20px_rgba(6,182,212,0.3)]">
              Subscribe Now
            </button>
    </div>
    <div class="p-8 rounded-2xl border border-white/5 bg-slate-900/20 flex flex-col items-start text-left">
      <div class="text-cyan-400 font-medium mb-2">Studio</div>
      <div class="text-4xl font-semibold text-white mb-6 tracking-tight">
        $99
        <span class="text-lg text-slate-500 font-normal">/mo</span>
      </div>
      <ul class="flex-1 space-y-4 mb-8 text-slate-300 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" data-lucide="check"
            class="lucide lucide-check w-4 h-4 text-cyan-500">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Everything in Creator
        </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" data-lucide="check"
            class="lucide lucide-check w-4 h-4 text-cyan-500">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Multi-track Stems
        </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" data-lucide="check"
            class="lucide lucide-check w-4 h-4 text-cyan-500">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          API Access
        </li>

      </ul>
      <button class="w-full py-3 rounded-xl border border-white/10 text-white font-medium hover:bg-white/5 transition-colors">
              Contact Sales
            </button>
    </div>
  </div>
</div>