Responsive Pricing Plans Section with Tailwind CSS

<section class="sm:px-6 lg:px-8 max-w-7xl border-neutral-200 border-t mt-12 mr-auto ml-auto pt-16 pr-4 pl-4">
  <div class="grid grid-cols-1 gap-8">
    <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-6">
      <div class="">
        <p class="text-sm font-medium text-neutral-600 font-sans">Transparent pricing</p>
        <h3 class="text-3xl sm:text-4xl md:text-5xl text-neutral-900 mt-2 font-bricolage font-medium tracking-tighter">Plans that match how you ship</h3>
        <p class="sm:text-base text-sm text-neutral-600 mt-4 max-w-[80ch] font-sans">Clear scopes, fixed sprints, and
          embedded options. No surprises—just momentum.</p>
      </div>
      <a href="#contact"
        class="inline-flex items-center gap-2 text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-800 transition rounded-xl px-6 py-3 ring-1 ring-neutral-800 font-sans">
        Get a tailored quote
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4" style="stroke-width: 1.5">
          <path d="M7 7h10v10" class=""></path>
          <path d="M7 17 17 7" class=""></path>
        </svg>
      </a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
      <!-- Starter -->
      <div
        class="relative rounded-2xl border border-neutral-200 bg-white p-8 hover:shadow-lg hover:border-neutral-300 transition-all duration-300">
        <div class="flex items-center justify-between">
          <h4 class="text-lg font-medium tracking-tight text-neutral-900 font-sans">Starter Sprint</h4>
          <span class="inline-flex items-center gap-1 rounded-full border border-neutral-200 bg-neutral-100 px-3 py-1 text-xs text-neutral-700 font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="rocket" class="lucide lucide-rocket w-3.5 h-3.5" style="stroke-width: 1.5"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" class=""></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" class=""></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" class=""></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" class=""></path></svg>
            Quick start
          </span>
        </div>
        <div class="mt-6">
          <div class="flex items-baseline gap-2">
            <span class="text-4xl sm:text-5xl text-neutral-900 font-bricolage font-medium tracking-tighter" style="">$25k</span>
            <span class="text-neutral-600 text-sm font-sans">per 2-week sprint</span>
          </div>
          <p class="text-sm text-neutral-600 mt-2 font-sans">Best for focused features or MVP validation.</p>
        </div>
        <ul class="mt-6 space-y-3 text-sm text-neutral-700 font-geist">
          <li class="flex items-start gap-3 font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-emerald-600 mt-0.5" style="stroke-width: 1.5">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            1 pod: Designer + Engineer
          </li>
          <li class="flex items-start gap-3 font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-emerald-600 mt-0.5" style="stroke-width: 1.5">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Weekly demo + async updates
          </li>
          <li class="flex items-start gap-3 font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-emerald-600 mt-0.5" style="stroke-width: 1.5">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Handoff or code-ready assets
          </li>
        </ul>
        <a href="#contact"
          class="mt-8 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-neutral-100 hover:bg-neutral-200 border border-neutral-200 text-neutral-900 text-sm font-medium px-4 py-3 transition font-sans">
          Start with Starter
        </a>
      </div>

      <!-- Growth (Featured) -->
      <div
        class="relative rounded-2xl border-2 border-emerald-200 bg-gradient-to-b from-emerald-50 to-white p-8 shadow-lg shadow-emerald-100/50">
        <div
          class="absolute -top-3 left-8 inline-flex items-center rounded-full bg-emerald-600 text-white text-xs font-medium px-3 py-1 ring-2 ring-white font-sans">
          Most popular</div>
        <div class="flex items-center justify-between">
          <h4 class="text-lg font-medium tracking-tight text-neutral-900 font-sans">Growth Sprint</h4>
          <span class="inline-flex items-center gap-1 rounded-full border border-emerald-300 bg-emerald-100 px-3 py-1 text-xs text-emerald-800 font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="gauge" class="lucide lucide-gauge w-3.5 h-3.5" style="stroke-width: 1.5"><path d="m12 14 4-4" class=""></path><path d="M3.34 19a10 10 0 1 1 17.32 0" class=""></path></svg>
            More velocity
          </span>
        </div>
        <div class="mt-6">
          <div class="flex items-baseline gap-2">
            <span class="text-4xl sm:text-5xl text-neutral-900 font-bricolage font-medium tracking-tighter" style="">$40k</span>
            <span class="text-neutral-600 text-sm font-sans">per 3-week sprint</span>
          </div>
          <p class="text-sm text-neutral-600 mt-2 font-sans">For multi-track work: design + build in parallel.</p>
        </div>
        <ul class="mt-6 space-y-3 text-sm text-neutral-700 font-geist">
          <li class="flex items-start gap-3 font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-emerald-600 mt-0.5" style="stroke-width: 1.5">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            2 pods: Design + Engineering
          </li>
          <li class="flex items-start gap-3 font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-emerald-600 mt-0.5" style="stroke-width: 1.5">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Research, testing, and analytics setup
          </li>
          <li class="flex items-start gap-3 font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-emerald-600 mt-0.5" style="stroke-width: 1.5">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Design system tokens + components
          </li>
        </ul>
        <a href="#contact"
          class="mt-8 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-emerald-600 text-white hover:bg-emerald-700 text-sm font-medium px-4 py-3 transition ring-1 ring-emerald-600 font-sans">
          Book a Growth sprint
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="calendar"
            class="lucide lucide-calendar w-4 h-4" style="stroke-width: 1.5">
            <path d="M8 2v4" class=""></path>
            <path d="M16 2v4" class=""></path>
            <rect width="18" height="18" x="3" y="4" rx="2" class=""></rect>
            <path d="M3 10h18" class=""></path>
          </svg>
        </a>
      </div>

      <!-- Embedded -->
      <div
        class="relative rounded-2xl border border-neutral-200 bg-white p-8 hover:shadow-lg hover:border-neutral-300 transition-all duration-300">
        <div class="flex items-center justify-between">
          <h4 class="text-lg font-medium tracking-tight text-neutral-900 font-sans">Embedded Partner</h4>
          <span class="inline-flex items-center gap-1 rounded-full border border-neutral-200 bg-neutral-100 px-3 py-1 text-xs text-neutral-700 font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="handshake" class="lucide lucide-handshake w-3.5 h-3.5" style="stroke-width: 1.5"><path d="m11 17 2 2a1 1 0 1 0 3-3" class=""></path><path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4" class=""></path><path d="m21 3 1 11h-2" class=""></path><path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3" class=""></path><path d="M3 4h8" class=""></path></svg>
            Embedded
          </span>
        </div>
        <div class="mt-6">
          <div class="flex items-baseline gap-2">
            <span class="text-4xl sm:text-5xl text-neutral-900 font-bricolage font-medium tracking-tighter" style="">$12k</span>
            <span class="text-neutral-600 text-sm font-sans">per week</span>
          </div>
          <p class="text-sm text-neutral-600 mt-2 font-sans">Your senior squad integrated with your team.</p>
        </div>
        <ul class="mt-6 space-y-3 text-sm text-neutral-700 font-geist">
          <li class="flex items-start gap-3 font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-emerald-600 mt-0.5" style="stroke-width: 1.5">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Dedicated PM, Designers, Engineers
          </li>
          <li class="flex items-start gap-3 font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-emerald-600 mt-0.5" style="stroke-width: 1.5">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Standups, roadmaps, repo access
          </li>
          <li class="flex items-start gap-3 font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-emerald-600 mt-0.5" style="stroke-width: 1.5">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Priority support + fast turnarounds
          </li>
        </ul>
        <a href="#contact"
          class="mt-8 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-neutral-100 hover:bg-neutral-200 border border-neutral-200 text-neutral-900 text-sm font-medium px-4 py-3 transition font-sans">
          Discuss Embedded
        </a>
      </div>
    </div>

    <div class="mt-12 grid grid-cols-1 lg:grid-cols-3 gap-8 text-sm">
      <div class="text-neutral-600 font-geist">
        <div
          class="inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-neutral-50 px-3 py-1.5 text-xs text-neutral-700 mb-3 font-sans">
          <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
          What's included
        </div>
        <p class="font-sans">Every plan includes weekly demos, shared roadmaps, async updates, and access to source
          files or repos.</p>
      </div>
      <div class="text-neutral-600 font-geist">
        <div
          class="inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-neutral-50 px-3 py-1.5 text-xs text-neutral-700 mb-3 font-sans">
          <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
          Flexible scope
        </div>
        <p class="font-sans">Pause between sprints. Scale pods up or down as priorities shift.</p>
      </div>
      <div class="text-neutral-600 font-geist">
        <div
          class="inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-neutral-50 px-3 py-1.5 text-xs text-neutral-700 mb-3 font-sans">
          <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
          Custom engagements
        </div>
        <p class="font-sans">Have a unique scope? We'll tailor a plan and price to your goals.</p>
      </div>
    </div>
  </div>
</section>