Pricing — Two plans

Two balanced plans with a dark second card and bottom-aligned actions. Use for an entry-level versus expanded-access choice.

ReactHTML

1440 × 900

Open in new tab

Component.tsx182 lines

export default function PricingTwoPlans() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <header className="mx-auto max-w-xl text-center">
          <p className="text-sm font-medium text-neutral-500">Section label</p>
          <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading for two clear plan choices</h2>
          <p className="mt-4 text-lg text-pretty text-neutral-600">
            One sentence that explains the difference between the starting plan and the expanded option.
          </p>
        </header>
        <div className="mx-auto mt-12 grid max-w-4xl gap-6 md:grid-cols-2">
          <article className="flex flex-col rounded-lg border p-6 border-neutral-200 bg-white">
            <p className="text-sm font-medium text-neutral-500">Starting scope</p>
            <h3 className="mt-3 text-lg font-semibold">Entry plan</h3>
            <p className="mt-6 flex flex-wrap items-baseline gap-2">
              <span className="text-5xl font-semibold tracking-tight">$19</span>
              <span className="text-sm text-neutral-500">/month</span>
            </p>
            <p className="mt-4 text-sm text-neutral-600">A sentence that names the audience and core access included in this plan.</p>
            <ul role="list" className="mt-6 mb-8 space-y-3 text-sm text-neutral-600">
              <li className="flex items-start gap-3">
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-5 shrink-0"
                >
                  <path d="m5 12 4 4L19 6" />
                </svg>
                <span>Core access for the plan</span>
              </li>
              <li className="flex items-start gap-3">
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-5 shrink-0"
                >
                  <path d="m5 12 4 4L19 6" />
                </svg>
                <span>Capacity or usage allowance</span>
              </li>
              <li className="flex items-start gap-3">
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-5 shrink-0"
                >
                  <path d="m5 12 4 4L19 6" />
                </svg>
                <span>Collaboration benefit for members</span>
              </li>
              <li className="flex items-start gap-3">
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-5 shrink-0"
                >
                  <path d="m5 12 4 4L19 6" />
                </svg>
                <span>Support coverage and limits</span>
              </li>
            </ul>
            <a
              href="#"
              aria-label="Choose entry plan"
              className="inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 mt-auto w-full"
            >
              Choose plan
            </a>
          </article>
          <article className="flex flex-col rounded-lg border p-6 border-neutral-900 bg-neutral-900 text-white">
            <p className="text-sm font-medium text-neutral-300">Broader scope</p>
            <h3 className="mt-3 text-lg font-semibold">Expanded plan</h3>
            <p className="mt-6 flex flex-wrap items-baseline gap-2">
              <span className="text-5xl font-semibold tracking-tight">$49</span>
              <span className="text-sm text-neutral-300">/month</span>
            </p>
            <p className="mt-4 text-sm text-neutral-300">A sentence that explains who needs the additional capacity and support in this plan.</p>
            <ul role="list" className="mt-6 mb-8 space-y-3 text-sm text-neutral-300">
              <li className="flex items-start gap-3">
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-5 shrink-0"
                >
                  <path d="m5 12 4 4L19 6" />
                </svg>
                <span>Core access for the plan</span>
              </li>
              <li className="flex items-start gap-3">
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-5 shrink-0"
                >
                  <path d="m5 12 4 4L19 6" />
                </svg>
                <span>Capacity or usage allowance</span>
              </li>
              <li className="flex items-start gap-3">
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-5 shrink-0"
                >
                  <path d="m5 12 4 4L19 6" />
                </svg>
                <span>Collaboration benefit for members</span>
              </li>
              <li className="flex items-start gap-3">
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-5 shrink-0"
                >
                  <path d="m5 12 4 4L19 6" />
                </svg>
                <span>Support coverage and limits</span>
              </li>
            </ul>
            <a
              href="#"
              aria-label="Choose expanded plan"
              className="inline-flex h-11 items-center justify-center rounded-md bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white mt-auto w-full"
            >
              Choose plan
            </a>
          </article>
        </div>
        <p className="mt-8 text-center text-sm text-neutral-500">
          A short note about changing plans.{' '}
          <a
            href="#"
            className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            Compare details
          </a>
        </p>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for two clear access levels. Pick pricing-intro-plans for a separate explanatory column. Variations: use one-time versus ongoing access, change benefit counts, or add a trial hint.
Hierarchy: Section headings are 30px text-3xl semibold, 36px sm:text-4xl at 640px, with tight tracking and balanced wrapping. Intro precedes 14px labels, 18px titles, 48px text-5xl prices, descriptions and benefits. Slots: eyebrow 4 words, heading 8, lede 24, description 16, benefit 7, action 3. Prices $19 and $49 per month.
Responsive: Cards stack below 768px and become md:grid-cols-2 above. Flex columns stretch equally and actions use mt-auto. Heading and padding increase at 640px.
Layout: White section with 1152px max-w-6xl container, 24px px-6 side padding and 64px py-16 vertical padding, increasing to 96px sm:py-24 at 640px. Centred max-w-xl header followed 48px below by max-w-4xl 896px plan grid, 24px gap. Cards are flex columns with p-6, rounded-lg and four benefits. Second is neutral-900 with white headings and neutral-300 text. Footer note is centred 32px below.
States: 44px h-11 actions have 6px rounded-md corners and 150ms color transitions. Primary hover fills neutral-700; secondary fills neutral-50; links turn neutral-600. Keyboard focus draws a 2px neutral-900 outline offset 2px. Dark-card white action hovers neutral-200 and uses a white focus outline. No billing selector or disabled state.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│               Eyebrow / Headline / Lede                      │
│        ┌──────────────────┐ ┌──────────────────┐             │
│        │ Entry label      │ │ Expanded label   │             │
│        │ Plan name        │ │ Plan name        │             │
│        │ $19 /month       │ │ $49 /month       │             │
│        │ Description      │ │ Description      │             │
│        │ Four benefits    │ │ Four benefits    │             │
│        │ [Choose plan]    │ │ [Choose plan]    │             │
│        └──────────────────┘ └──────────────────┘             │
│                 Note and [Compare details]                   │
└──────────────────────────────────────────────────────────────┘

View all

Pricing — Annual price with a payment schedule
Layout tags: split,numbers,list
Pricing — Base plan with optional additions
Layout tags: stacked,grid,numbers
Pricing — Comparison table
Layout tags: table,numbers,compact

Pricing — Two plans

Pattern notes

More in Pricing

Pricing — Annual price with a payment schedule

Pricing — Base plan with optional additions

Pricing — Comparison table