Pricing Table

Side-by-side presentation of pricing tiers.

html

<section class="ptable" data-highlight="Pro" style="--accent:#241430;">
  <h2 class="ptable__heading">Simple, transparent pricing</h2>
  <div class="ptable__cols">
    <div class="ptable__col ptable__col--Starter"><p class="ptable__name">Starter</p><p class="ptable__price">$12<small>/mo</small></p></div>
    <div class="ptable__col ptable__col--Pro"><p class="ptable__name">Pro</p><p class="ptable__price">$29<small>/mo</small></p></div>
    <div class="ptable__col ptable__col--Team"><p class="ptable__name">Team</p><p class="ptable__price">$59<small>/mo</small></p></div>
  </div>
</section>
<style>
.ptable { font: 15px system-ui, sans-serif; color: #241430; padding: 24px; text-align: center; }
.ptable__heading { margin: 0 0 20px; font-size: 22px; font-weight: 700; }
.ptable__cols { display: flex; gap: 16px; justify-content: center; }
.ptable__col { flex: 1; max-width: 150px; padding: 18px; border-radius: 12px; border: 1.5px solid #24143022; }
.ptable[data-highlight="Starter"] .ptable__col--Starter,
.ptable[data-highlight="Pro"] .ptable__col--Pro,
.ptable[data-highlight="Team"] .ptable__col--Team { border-color: var(--accent); background: var(--accent); color: #FAF7F2; }
.ptable__name { margin: 0 0 6px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.ptable__price { margin: 0; font-size: 24px; font-weight: 800; }
.ptable__price small { font-size: 12px; font-weight: 500; opacity: .75; }
</style>

tailwind

<section class="ptable-tw ptable-tw--Pro font-sans text-[15px] text-[#241430] p-6 text-center" style="--accent:#241430;">
  <h2 class="m-0 mb-5 text-2xl font-bold">Simple, transparent pricing</h2>
  <div class="flex gap-4 justify-center">
    <div class="ptable-tw__col ptable-tw__col--Starter flex-1 max-w-[150px] p-4.5 rounded-xl border-[1.5px] border-[#24143022]"><p class="m-0 mb-1.5 font-bold text-[13px] uppercase tracking-wide">Starter</p><p class="m-0 text-2xl font-extrabold">$12<small class="text-xs font-medium opacity-75">/mo</small></p></div>
    <div class="ptable-tw__col ptable-tw__col--Pro flex-1 max-w-[150px] p-4.5 rounded-xl border-[1.5px] border-[#24143022]"><p class="m-0 mb-1.5 font-bold text-[13px] uppercase tracking-wide">Pro</p><p class="m-0 text-2xl font-extrabold">$29<small class="text-xs font-medium opacity-75">/mo</small></p></div>
    <div class="ptable-tw__col ptable-tw__col--Team flex-1 max-w-[150px] p-4.5 rounded-xl border-[1.5px] border-[#24143022]"><p class="m-0 mb-1.5 font-bold text-[13px] uppercase tracking-wide">Team</p><p class="m-0 text-2xl font-extrabold">$59<small class="text-xs font-medium opacity-75">/mo</small></p></div>
  </div>
</section>
<style>
.ptable-tw--Starter .ptable-tw__col--Starter, .ptable-tw--Pro .ptable-tw__col--Pro, .ptable-tw--Team .ptable-tw__col--Team { border-color: var(--accent); background: var(--accent); color: #FAF7F2; }
</style>

react

export function PricingTable({
  heading = "Simple, transparent pricing",
  highlightedPlan = "Pro",
  accent = "#241430",
  annualBilling = false,
}) {
  const plans = [
    { name: "Starter", monthly: 12, annual: 9 },
    { name: "Pro", monthly: 29, annual: 24 },
    { name: "Team", monthly: 59, annual: 49 },
  ];
  return (
    <section style={{ font: "15px system-ui, sans-serif", color: "#241430", padding: 24, textAlign: "center" }}>
      <h2 style={{ margin: "0 0 20px", fontSize: 22, fontWeight: 700 }}>{heading}</h2>
      <div style={{ display: "flex", gap: 16, justifyContent: "center" }}>
        {plans.map((plan) => {
          const active = plan.name === highlightedPlan;
          return (
            <div key={plan.name} style={{ flex: 1, maxWidth: 150, padding: 18, borderRadius: 12,
              border: `1.5px solid ${active ? accent : "#24143022"}`, background: active ? accent : "transparent",
              color: active ? "#FAF7F2" : "#241430" }}>
              <p style={{ margin: "0 0 6px", fontWeight: 700, fontSize: 13, textTransform: "uppercase", letterSpacing: "0.04em" }}>{plan.name}</p>
              <p style={{ margin: 0, fontSize: 24, fontWeight: 800 }}>
                ${annualBilling ? plan.annual : plan.monthly}<small style={{ fontSize: 12, fontWeight: 500, opacity: 0.75 }}>/mo</small>
              </p>
            </div>
          );
        })}
      </div>
    </section>
  );
}