Dual Plan Pricing Cards with Tailwind Gradients

<section class="min-h-[100svh] grid place-items-center px-4">
  <div class="w-full max-w-5xl">
  <!-- Small headers -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="flex items-center gap-4 rounded-2xl ring-1 ring-white/10 bg-neutral-900/60 px-4 py-3">
      <div class="w-10 h-10 rounded-xl bg-white/5 ring-1 ring-white/10 flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-300" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5">
          <polyline points="16 18 22 12 16 6" class=""></polyline>
          <polyline points="8 6 2 12 8 18" class=""></polyline>
        </svg>
      </div>
      <div class="">
        <p class="text-white text-base font-medium tracking-tight">
          Starter
        </p>
        <p class="text-neutral-400 text-sm">
          Perfect for solo developers &amp; freelancers
        </p>
      </div>
    </div>

    <div class="flex items-center gap-4 rounded-2xl ring-1 ring-white/10 bg-neutral-900/60 px-4 py-3">
      <div class="w-10 h-10 rounded-xl bg-white/5 ring-1 ring-white/10 flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-300" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5">
          <path d="m12 2 3 7 7 3-7 3-3 7-3-7-7-3 7-3 3-7z" class=""></path>
        </svg>
      </div>
      <div class="">
        <p class="text-white text-base font-medium tracking-tight">
          Pro
        </p>
        <p class="text-neutral-400 text-sm">
          Built for growing teams &amp; agencies
        </p>
      </div>
    </div>
  </div>

  <!-- Pricing cards -->
  <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
    <!-- Card: Starter -->
    <div
      class="relative rounded-2xl ring-1 ring-white/10 bg-gradient-to-b from-zinc-900/70 to-zinc-950 px-5 py-6 sm:px-8 sm:py-8 overflow-hidden">
      <div class="pointer-events-none absolute inset-0 opacity-[0.18]"
        style="background-image: radial-gradient(rgba(255,255,255,0.25) 1px, transparent 1px); background-size: 18px 18px;">
      </div>

      <div class="relative">
        <div class="flex items-end gap-3">
          <p
            class="text-5xl sm:text-6xl font-semibold tracking-tight bg-gradient-to-r from-blue-400 via-cyan-400 to-blue-500 bg-clip-text text-transparent">
            $49
          </p>
          <span class="text-[11px] uppercase text-neutral-400 mb-1">
                      /month
                    </span>
        </div>

        <p class="mt-4 text-sm sm:text-base text-neutral-300 max-w-[40ch]">
          Start transforming designs into code instantly with
          AI-powered generation.
        </p>

        <p class="mt-6 text-xs uppercase tracking-wide text-neutral-400">
          Early Adopter Pricing
        </p>

        <div class="mt-3">
          <button type="button" class="group relative inline-flex w-full h-12 sm:h-12 cursor-pointer overflow-hidden rounded-full items-center justify-center text-base font-medium text-white shadow-[inset_0_2px_8px_rgba(255,255,255,0.25),_inset_0_-3px_8px_rgba(0,0,0,0.35),_0_4px_10px_rgba(0,0,0,0.4)] transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px]" style="background: linear-gradient(45deg, #06b6d4, #3b82f6, #2563eb);">
                      <!-- Front Text -->
                      <span class="relative z-10 transition-all duration-500 ease-out group-hover:translate-y-full group-hover:opacity-0">
                        Start Free Trial
                      </span>

                      <!-- Hover Text -->
                      <span class="absolute inset-0 flex items-center justify-center z-10 transition-all duration-500 ease-out translate-y-full opacity-0 group-hover:translate-y-0 group-hover:opacity-100">
                        Start Free Trial
                      </span>

                      <!-- Glow Overlay -->
                      <span aria-hidden="true" class="absolute inset-0 rounded-full opacity-0 transition-opacity duration-700 group-hover:opacity-100 blur-[20px]" style="background: linear-gradient(45deg, #06b6d4, #3b82f6, #2563eb); z-index: -1;"></span>
                    </button>
        </div>

        <ul class="mt-6 space-y-2 text-sm text-neutral-300">
          <li class="flex items-start gap-3">
            <span class="mt-1 w-2 h-2 rounded-full ring-1 ring-white/30"></span>
            50 design conversions per month
          </li>
          <li class="flex items-start gap-3">
            <span class="mt-1 w-2 h-2 rounded-full ring-1 ring-white/30"></span>
            React, Vue &amp; HTML output
          </li>
          <li class="flex items-start gap-3">
            <span class="mt-1 w-2 h-2 rounded-full ring-1 ring-white/30"></span>
            Responsive code generation
          </li>
        </ul>

        <div class="mt-6 h-px bg-white/10"></div>

        <ul class="mt-6 space-y-2 text-sm text-neutral-300">
          <li class="flex items-start gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-400 mt-0.5" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5">
              <path d="M9 12l2 2 4-4" class=""></path>
              <circle cx="12" cy="12" r="10" class=""></circle>
            </svg>
            Figma &amp; Adobe XD integration
          </li>
          <li class="flex items-start gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-400 mt-0.5" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5">
              <path d="M9 12l2 2 4-4" class=""></path>
              <circle cx="12" cy="12" r="10" class=""></circle>
            </svg>
            Production-ready, clean code
          </li>
        </ul>
      </div>
    </div>

    <!-- Card: Pro -->
    <div
      class="relative rounded-2xl ring-1 ring-white/10 bg-gradient-to-b from-zinc-900/70 to-zinc-950 px-5 py-6 sm:px-8 sm:py-8 overflow-hidden">
      <div class="pointer-events-none absolute inset-0 opacity-[0.18]"
        style="background-image: radial-gradient(rgba(255,255,255,0.25) 1px, transparent 1px); background-size: 18px 18px;">
      </div>

      <div class="relative">
        <div class="flex items-end gap-3">
          <p
            class="text-5xl sm:text-6xl font-semibold tracking-tight bg-gradient-to-r from-blue-400 via-cyan-400 to-blue-500 bg-clip-text text-transparent">
            $149
          </p>
          <span class="text-[11px] uppercase text-neutral-400 mb-1">
                      /month
                    </span>
        </div>

        <p class="mt-4 text-sm sm:text-base text-neutral-300 max-w-[44ch]">
          Ship faster with unlimited conversions and advanced team
          collaboration features.
        </p>

        <p class="mt-6 text-xs uppercase tracking-wide text-neutral-400">
          Most Popular Plan
        </p>

        <div class="mt-3">
          <button class="group relative inline-flex items-center justify-center w-full h-12 sm:h-12 px-6 py-3 text-sm font-semibold tracking-tight cursor-pointer overflow-hidden rounded-full border border-white/15 bg-white/5 text-neutral-300 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px] hover:text-white hover:bg-white/10">
                      <span class="relative z-10 transition-all duration-500 ease-out group-hover:translate-y-8 group-hover:opacity-0 group-hover:blur-md">
                        Start Free Trial
                      </span>
                      <span class="absolute inset-0 z-10 flex items-center justify-center font-medium opacity-0 transition-all duration-300 ease-in-out transform -translate-y-8 group-hover:translate-y-0 group-hover:opacity-100 group-hover:blur-none">
                        Start Free Trial
                      </span>
                      <span aria-hidden="true" class="absolute bottom-0 left-1/2 h-[1px] w-[70%] -translate-x-1/2 rounded-full bg-gradient-to-r from-transparent via-white/70 to-transparent transition-all duration-[1000ms] opacity-70 blur-[2px]"></span>
                      <span aria-hidden="true" class="absolute inset-0 rounded-full pointer-events-none bg-gradient-to-t from-white/15 via-white/10 to-transparent"></span>
                    </button>
        </div>

        <ul class="mt-6 space-y-2 text-sm text-neutral-300">
          <li class="flex items-start gap-3">
            <span class="mt-1 w-2 h-2 rounded-full ring-1 ring-white/30"></span>
            Unlimited design conversions
          </li>
          <li class="flex items-start gap-3">
            <span class="mt-1 w-2 h-2 rounded-full ring-1 ring-white/30"></span>
            Advanced component library
          </li>
          <li class="flex items-start gap-3">
            <span class="mt-1 w-2 h-2 rounded-full ring-1 ring-white/30"></span>
            Real-time team collaboration
          </li>
        </ul>

        <div class="mt-6 h-px bg-white/10"></div>

        <ul class="mt-6 space-y-2 text-sm text-neutral-300">
          <li class="flex items-start gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-400 mt-0.5" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5">
              <path d="M9 12l2 2 4-4" class=""></path>
              <circle cx="12" cy="12" r="10" class=""></circle>
            </svg>
            Priority support &amp; code reviews
          </li>
          <li class="flex items-start gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-400 mt-0.5" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5">
              <path d="M9 12l2 2 4-4" class=""></path>
              <circle cx="12" cy="12" r="10" class=""></circle>
            </svg>
            API access &amp; custom integrations
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>