Pricing — Three tiers, middle highlighted

Three equal plan cards beneath a monthly and yearly billing selector, with the middle plan emphasized. Use to compare three levels of access.

ReactHTML

1440 × 900

Open in new tab

Component.tsx327 lines

export default function PricingThreeTiers() {
  return (
    <section className="group 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">
          <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading that makes plan choice clear</h2>
          <p className="mt-4 text-lg text-pretty text-neutral-600">A short introduction that explains how the plans differ and who each level is for.</p>
        </header>
        <fieldset className="mx-auto mt-8 flex w-fit max-w-full flex-wrap justify-center gap-1 rounded-full border border-neutral-300 p-1">
          <legend className="sr-only">Billing period</legend>
          <label className="inline-flex min-h-11 cursor-pointer items-center justify-center rounded-full border border-transparent px-4 text-sm font-medium transition-colors hover:bg-neutral-50 has-[:checked]:border-neutral-900 has-[:checked]:bg-neutral-900 has-[:checked]:text-white has-[:checked]:underline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900">
            <input
              id="pricing-three-tiers-monthly"
              type="radio"
              name="pricing-three-tiers-billing"
              defaultChecked
              className="sr-only focus-visible:outline-hidden"
            />
            Monthly
          </label>
          <label className="inline-flex min-h-11 cursor-pointer items-center justify-center rounded-full border border-transparent px-4 text-sm font-medium transition-colors hover:bg-neutral-50 has-[:checked]:border-neutral-900 has-[:checked]:bg-neutral-900 has-[:checked]:text-white has-[:checked]:underline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900">
            <input id="pricing-three-tiers-yearly" type="radio" name="pricing-three-tiers-billing" className="sr-only focus-visible:outline-hidden" />
            Yearly<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium ml-2">Save 20%</span>
          </label>
        </fieldset>
        <div className="mx-auto mt-10 grid max-w-md gap-6 lg:max-w-none lg:grid-cols-3">
          <article className="rounded-lg border border-neutral-200 bg-white p-6">
            <div className="flex min-h-7 items-start"></div>
            <h3 className="mt-3 text-lg font-semibold">Entry plan</h3>
            <p className="mt-2 text-sm text-neutral-600">A description of the starting scope.</p>
            <p className="mt-6 flex flex-wrap items-baseline gap-2">
              <span className="text-5xl font-semibold tracking-tight group-has-[#pricing-three-tiers-yearly:checked]:hidden">$19</span>
              <span className="hidden text-5xl font-semibold tracking-tight group-has-[#pricing-three-tiers-yearly:checked]:inline">$15.20</span>
              <span className="text-sm text-neutral-500">/month</span>
            </p>
            <div className="mt-2 min-h-10 text-sm text-neutral-500">
              <p className="group-has-[#pricing-three-tiers-yearly:checked]:hidden">Billed monthly</p>
              <p className="hidden group-has-[#pricing-three-tiers-yearly:checked]:block">Billed $182.40 yearly</p>
            </div>
            <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-6 w-full"
            >
              Choose plan
            </a>
            <ul role="list" className="mt-6 border-t border-neutral-200 pt-6 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>Primary capability included</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>Access allowance for this tier</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 scope 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 level 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>Additional benefit or limit</span>
              </li>
            </ul>
          </article>
          <article className="rounded-lg border border-neutral-900 bg-white p-6 shadow-lg">
            <div className="flex min-h-7 items-start">
              <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">Most popular</span>
            </div>
            <h3 className="mt-3 text-lg font-semibold">Expanded plan</h3>
            <p className="mt-2 text-sm text-neutral-600">A description of the additional access.</p>
            <p className="mt-6 flex flex-wrap items-baseline gap-2">
              <span className="text-5xl font-semibold tracking-tight group-has-[#pricing-three-tiers-yearly:checked]:hidden">$49</span>
              <span className="hidden text-5xl font-semibold tracking-tight group-has-[#pricing-three-tiers-yearly:checked]:inline">$39.20</span>
              <span className="text-sm text-neutral-500">/month</span>
            </p>
            <div className="mt-2 min-h-10 text-sm text-neutral-500">
              <p className="group-has-[#pricing-three-tiers-yearly:checked]:hidden">Billed monthly</p>
              <p className="hidden group-has-[#pricing-three-tiers-yearly:checked]:block">Billed $470.40 yearly</p>
            </div>
            <a
              href="#"
              aria-label="Choose expanded plan"
              className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 mt-6 w-full"
            >
              Choose plan
            </a>
            <ul role="list" className="mt-6 border-t border-neutral-200 pt-6 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>Primary capability included</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>Access allowance for this tier</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 scope 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 level 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>Additional benefit or limit</span>
              </li>
            </ul>
          </article>
          <article className="rounded-lg border border-neutral-200 bg-white p-6">
            <div className="flex min-h-7 items-start"></div>
            <h3 className="mt-3 text-lg font-semibold">Complete plan</h3>
            <p className="mt-2 text-sm text-neutral-600">A description of the widest coverage.</p>
            <p className="mt-6 flex flex-wrap items-baseline gap-2">
              <span className="text-5xl font-semibold tracking-tight group-has-[#pricing-three-tiers-yearly:checked]:hidden">$99</span>
              <span className="hidden text-5xl font-semibold tracking-tight group-has-[#pricing-three-tiers-yearly:checked]:inline">$79.20</span>
              <span className="text-sm text-neutral-500">/month</span>
            </p>
            <div className="mt-2 min-h-10 text-sm text-neutral-500">
              <p className="group-has-[#pricing-three-tiers-yearly:checked]:hidden">Billed monthly</p>
              <p className="hidden group-has-[#pricing-three-tiers-yearly:checked]:block">Billed $950.40 yearly</p>
            </div>
            <a
              href="#"
              aria-label="Choose complete 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-6 w-full"
            >
              Choose plan
            </a>
            <ul role="list" className="mt-6 border-t border-neutral-200 pt-6 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>Primary capability included</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>Access allowance for this tier</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 scope 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 level 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>Additional benefit or limit</span>
              </li>
            </ul>
          </article>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for progressive tiers. Pick pricing-comparison-table for many limits. Variations: highlight another tier, reduce benefits to three, or add a trial note.
Hierarchy: Section headings are 30px text-3xl semibold, 36px sm:text-4xl at 640px, with tight tracking and balanced wrapping. Headline, billing choice, plan names, 48px text-5xl prices, actions then benefits. Slots: headline 8 words, lede 24, plan 3, description 12, benefit 7. Each card contains both price sets and matching billing notes.
Responsive: Below 1024px cards stack in a centred max-w-md 448px column. From 1024px three equal columns align actions. Billing labels wrap at narrow widths. 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; billing pill 32px below, cards 40px below. Three lg:grid-cols-3 columns with 24px gap. Cards p-6, rounded-lg; featured card has a 1px neutral-900 border, badge and shadow-lg. Five-item benefit lists follow a 24px-separated divider.
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. Native Monthly radio is selected initially. Labels use has-[:checked] dark fill, border and underline and has-[:focus-visible] outlines. Section group-has swaps every price and note. Annual-equivalent prices are $15.20, $39.20, $79.20; totals $182.40, $470.40, $950.40 yearly. Border and underline preserve selection in forced colors.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│                Headline and lede                             │
│              [Monthly] [Yearly Save 20%]                     │
│ ┌───────────────┐ ┌───────────────┐ ┌────────────────┐       │
│ │ Plan name     │ │ Most popular  │ │ Plan name      │       │
│ │ $19 /month    │ │ $49 /month    │ │ $99 /month     │       │
│ │ [Choose plan] │ │ [Choose plan] │ │ [Choose plan]  │       │
│ │ Five benefits │ │ Five benefits │ │ Five benefits  │       │
│ └───────────────┘ └───────────────┘ └────────────────┘       │
└──────────────────────────────────────────────────────────────┘

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 — Three tiers, middle highlighted

Pattern notes

More in Pricing

Pricing — Annual price with a payment schedule

Pricing — Base plan with optional additions

Pricing — Comparison table