Buy versus build panel

Design a buy-versus-build comparison with Tailwind CSS. Use a max-w-4xl section with a heading, a paragraph acknowledging that building it is genuinely possible, and two columns of equal width. The left column, headed "Build it yourself", is a bordered card listing six cost lines as rows with a label and a figure — engineering time, on-call, infrastructure, compliance work, ongoing maintenance and opportunity cost — with a hairline before a bold first-year total. The right column, headed "Use ours", is a neutral-900 card with the same row structure but far shorter, ending in its own total in white, plus a small line noting what is not included. Below, a horizontal bar comparison showing the two totals to scale with figures at the ends, and a closing line in muted text stating the assumptions behind the estimate with a link to the workings.

<section class="mx-auto max-w-4xl px-6 py-16">
  <div class="max-w-2xl">
    <h2 class="text-3xl font-semibold tracking-tight text-neutral-900">You could build this. Here is what it would cost.</h2>
    <p class="mt-3 leading-relaxed text-neutral-500">
      Genuinely — it is not complicated work, just a lot of it, forever. These are the numbers three customers gave us after trying.
    </p>
  </div>

  <div class="mt-10 grid gap-5 md:grid-cols-2">
    <div class="rounded-2xl border border-neutral-200 bg-white p-7">
      <p class="text-sm font-semibold text-neutral-900">Build it yourself</p>
      <p class="mt-1 text-xs text-neutral-500">Two engineers, first year, fully loaded</p>

      <dl class="mt-6 space-y-3 text-sm">
        <div class="flex items-baseline justify-between gap-4"><dt class="text-neutral-600">Initial build · 14 weeks</dt><dd class="font-mono text-neutral-900">$118,000</dd></div>
        <div class="flex items-baseline justify-between gap-4"><dt class="text-neutral-600">On-call rotation</dt><dd class="font-mono text-neutral-900">$34,000</dd></div>
        <div class="flex items-baseline justify-between gap-4"><dt class="text-neutral-600">Infrastructure</dt><dd class="font-mono text-neutral-900">$21,600</dd></div>
        <div class="flex items-baseline justify-between gap-4"><dt class="text-neutral-600">SOC 2 evidence work</dt><dd class="font-mono text-neutral-900">$26,000</dd></div>
        <div class="flex items-baseline justify-between gap-4"><dt class="text-neutral-600">Maintenance · 20% of a role</dt><dd class="font-mono text-neutral-900">$38,000</dd></div>
        <div class="flex items-baseline justify-between gap-4"><dt class="text-neutral-600">Features not shipped meanwhile</dt><dd class="font-mono text-neutral-400">unpriced</dd></div>
      </dl>

      <div class="mt-5 flex items-baseline justify-between border-t border-neutral-200 pt-4">
        <p class="text-sm font-semibold text-neutral-900">First-year total</p>
        <p class="font-mono text-xl font-semibold text-neutral-900">$237,600</p>
      </div>
    </div>

    <div class="rounded-2xl bg-neutral-900 p-7 text-white">
      <p class="text-sm font-semibold">Use ours</p>
      <p class="mt-1 text-xs text-neutral-400">Scale plan, 25 seats, same first year</p>

      <dl class="mt-6 space-y-3 text-sm">
        <div class="flex items-baseline justify-between gap-4"><dt class="text-neutral-400">Subscription · 12 months</dt><dd class="font-mono">$14,280</dd></div>
        <div class="flex items-baseline justify-between gap-4"><dt class="text-neutral-400">Implementation</dt><dd class="font-mono">included</dd></div>
        <div class="flex items-baseline justify-between gap-4"><dt class="text-neutral-400">Infrastructure</dt><dd class="font-mono">included</dd></div>
        <div class="flex items-baseline justify-between gap-4"><dt class="text-neutral-400">Compliance evidence</dt><dd class="font-mono">included</dd></div>
        <div class="flex items-baseline justify-between gap-4"><dt class="text-neutral-400">Integration work · 2 days</dt><dd class="font-mono">$3,400</dd></div>
        <div class="flex items-baseline justify-between gap-4"><dt class="text-neutral-400">On-call</dt><dd class="font-mono">ours</dd></div>
      </dl>

      <div class="mt-5 flex items-baseline justify-between border-t border-neutral-800 pt-4">
        <p class="text-sm font-semibold">First-year total</p>
        <p class="font-mono text-xl font-semibold">$17,680</p>
      </div>
      <p class="mt-4 text-xs leading-relaxed text-neutral-500">Not included: your own data modelling, and the meeting where everyone argues about metric definitions. That one is on you.</p>
    </div>
  </div>

  <div class="mt-8 space-y-3">
    <div class="flex items-center gap-4">
      <span class="w-24 shrink-0 text-xs text-neutral-500">Build</span>
      <div class="h-8 flex-1 overflow-hidden rounded-lg bg-neutral-100">
        <div class="flex h-full items-center justify-end rounded-lg bg-neutral-300 pr-3" style="width:100%"><span class="font-mono text-xs text-neutral-700">$237,600</span></div>
      </div>
    </div>
    <div class="flex items-center gap-4">
      <span class="w-24 shrink-0 text-xs text-neutral-500">Buy</span>
      <div class="h-8 flex-1 overflow-hidden rounded-lg bg-neutral-100">
        <div class="flex h-full items-center justify-end rounded-lg bg-neutral-900 pr-3" style="width:7.4%"><span class="font-mono text-xs text-white">$17.7k</span></div>
      </div>
    </div>
  </div>

  <p class="mt-6 text-xs leading-relaxed text-neutral-400">
    Assumes $140k fully loaded engineer cost, EU rates, and no rewrite in year two — which there usually is. <a href="#" class="underline underline-offset-2 hover:text-neutral-700">See the full workings</a>.
  </p>
</section>