Device plus plan pricing

Build a hardware-and-subscription pricing block with Tailwind CSS. Use a max-w-3xl card split into two halves by a hairline. The upper half is the device: a square product placeholder drawn as a neutral gradient tile on the left, and on the right the device name, two lines of description, a payment toggle of two segmented options — pay in full or spread over 24 months — and the resulting price shown as a large figure with a muted secondary line giving the alternative. The lower half is the plan: three compact rows with radio-style circles for Basic, Plus and Pro, each with a name, a one-line description and a monthly price, the middle one preselected. Under both, a total strip on neutral-50 giving the due-today figure and the monthly figure side by side, a dark checkout button and a muted line about the 30-day return window and cancellation terms.

<section class="mx-auto max-w-3xl px-6 py-14">
  <div class="overflow-hidden rounded-2xl border border-neutral-200 bg-white">
    <div class="flex flex-col gap-8 p-8 sm:flex-row">
      <div class="grid h-40 w-full shrink-0 place-items-center rounded-2xl bg-gradient-to-br from-neutral-100 to-neutral-200 text-neutral-400 sm:w-40"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 9 5-9 5-9-5 9-5Z"/><path d="m3 12 9 5 9-5M3 16l9 5 9-5"/></svg></div>

      <div class="min-w-0 flex-1">
        <h2 class="text-xl font-semibold tracking-tight text-neutral-900">Halden Gateway M2</h2>
        <p class="mt-2 text-sm leading-relaxed text-neutral-500">
          Edge appliance with dual 2.5 GbE, hardware key storage and passive cooling. Ships within three working days.
        </p>

        <div class="mt-5 flex rounded-xl border border-neutral-200 p-1">
          <button class="flex-1 rounded-lg bg-neutral-900 px-3 py-2 text-xs font-medium text-white">Pay in full</button>
          <button class="flex-1 rounded-lg px-3 py-2 text-xs font-medium text-neutral-600">Spread over 24 months</button>
        </div>

        <p class="mt-5 text-3xl font-semibold tracking-tight text-neutral-900">$720<span class="ml-1 text-sm font-normal text-neutral-400">once</span></p>
        <p class="mt-1 text-xs text-neutral-500">Or $30 a month for 24 months, interest free.</p>
      </div>
    </div>

    <div class="border-t border-neutral-200 p-8">
      <p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Choose a plan</p>

      <div class="mt-4 space-y-2.5">
        <label class="flex cursor-pointer items-center gap-4 rounded-xl border border-neutral-200 p-4 transition hover:bg-neutral-50">
          <span class="grid h-5 w-5 shrink-0 place-items-center rounded-full border-2 border-neutral-300"></span>
          <span class="min-w-0 flex-1">
            <span class="block text-sm font-medium text-neutral-900">Basic</span>
            <span class="block text-xs text-neutral-500">One site, daily sync, community support.</span>
          </span>
          <span class="text-sm font-medium text-neutral-900">$9<span class="text-xs font-normal text-neutral-400">/mo</span></span>
        </label>

        <label class="flex cursor-pointer items-center gap-4 rounded-xl border-2 border-neutral-900 bg-neutral-50 p-4">
          <span class="grid h-5 w-5 shrink-0 place-items-center rounded-full border-2 border-neutral-900"><span class="h-2 w-2 rounded-full bg-neutral-900"></span></span>
          <span class="min-w-0 flex-1">
            <span class="block text-sm font-medium text-neutral-900">Plus</span>
            <span class="block text-xs text-neutral-500">Five sites, live sync, next-business-day replacement.</span>
          </span>
          <span class="text-sm font-medium text-neutral-900">$24<span class="text-xs font-normal text-neutral-400">/mo</span></span>
        </label>

        <label class="flex cursor-pointer items-center gap-4 rounded-xl border border-neutral-200 p-4 transition hover:bg-neutral-50">
          <span class="grid h-5 w-5 shrink-0 place-items-center rounded-full border-2 border-neutral-300"></span>
          <span class="min-w-0 flex-1">
            <span class="block text-sm font-medium text-neutral-900">Pro</span>
            <span class="block text-xs text-neutral-500">Unlimited sites, redundant gateways, 4-hour swap.</span>
          </span>
          <span class="text-sm font-medium text-neutral-900">$59<span class="text-xs font-normal text-neutral-400">/mo</span></span>
        </label>
      </div>
    </div>

    <div class="flex flex-col gap-5 border-t border-neutral-200 bg-neutral-50 p-8 sm:flex-row sm:items-center sm:justify-between">
      <div class="flex gap-10">
        <div>
          <p class="text-xs uppercase tracking-widest text-neutral-400">Due today</p>
          <p class="mt-1 text-2xl font-semibold text-neutral-900">$744</p>
        </div>
        <div>
          <p class="text-xs uppercase tracking-widest text-neutral-400">Then monthly</p>
          <p class="mt-1 text-2xl font-semibold text-neutral-900">$24</p>
        </div>
      </div>
      <div class="sm:text-right">
        <button class="rounded-xl bg-neutral-900 px-6 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Continue to checkout</button>
        <p class="mt-2 max-w-xs text-xs leading-relaxed text-neutral-400">30-day returns on hardware. Cancel the plan any time — the device keeps working locally.</p>
      </div>
    </div>
  </div>
</section>