Pricing Tier

Individual plan within a pricing table.

html

<div class="tier tier--highlighted" style="--accent:#241430;">
  <span class="tier__badge">Most popular</span>
  <p class="tier__name">Pro</p>
  <p class="tier__price"><span>$</span>29<small>/mo</small></p>
  <ul class="tier__features">
    <li>Unlimited projects</li>
    <li>Priority support</li>
    <li>Team analytics</li>
  </ul>
  <button type="button" class="tier__cta">Choose Pro</button>
</div>
<style>
.tier { font: 15px system-ui, sans-serif; color: #241430; max-width: 240px; padding: 24px; border-radius: 16px; border: 1.5px solid #24143022; background: #FAF7F2; position: relative; }
.tier--highlighted { border-color: var(--accent); box-shadow: 0 16px 32px rgba(36,20,48,.14); }
.tier__badge { position: absolute; top: -12px; left: 24px; background: var(--accent); color: #FAF7F2; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.tier__name { margin: 0 0 6px; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .05em; color: #241430aa; }
.tier__price { margin: 0 0 18px; font-size: 34px; font-weight: 800; }
.tier__price span { font-size: 20px; vertical-align: top; }
.tier__price small { font-size: 14px; font-weight: 500; color: #241430aa; }
.tier__features { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #241430cc; }
.tier__features li::before { content: "\2713"; color: var(--accent); font-weight: 700; margin-right: 8px; }
.tier__cta { width: 100%; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); padding: 10px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.tier--highlighted .tier__cta { background: var(--accent); color: #FAF7F2; }
.tier__cta:hover, .tier__cta:focus-visible { opacity: .9; }
</style>

tailwind

<div class="tier-tw tier-tw--highlighted relative font-sans text-[15px] text-[#241430] max-w-[240px] p-6 rounded-2xl border-[1.5px] border-[#24143022] bg-[#FAF7F2]" style="--accent:#241430;">
  <span class="absolute -top-3 left-6 text-[#FAF7F2] text-[11px] font-bold px-2.5 py-1 rounded-full" style="background:#241430;">Most popular</span>
  <p class="m-0 mb-1.5 font-bold uppercase text-xs tracking-wide text-[#241430]/65">Pro</p>
  <p class="m-0 mb-4.5 text-[34px] font-extrabold"><span class="text-xl align-top">$</span>29<small class="text-sm font-medium text-[#241430]/65">/mo</small></p>
  <ul class="list-none m-0 mb-5 p-0 flex flex-col gap-2 text-sm text-[#241430]/80">
    <li>&#10003; Unlimited projects</li>
    <li>&#10003; Priority support</li>
    <li>&#10003; Team analytics</li>
  </ul>
  <button type="button" class="tier-tw__cta w-full border-[1.5px] bg-transparent px-0 py-2.5 rounded-lg font-bold cursor-pointer hover:opacity-90" style="border-color:#241430;color:#241430;">Choose Pro</button>
</div>
<style>
.tier-tw--highlighted { box-shadow: 0 16px 32px rgba(36,20,48,.14); }
.tier-tw--highlighted .tier-tw__cta { background: var(--accent); color: #FAF7F2; }
</style>

react

export function PricingTier({
  planName = "Pro",
  price = 29,
  ctaText = "Choose Pro",
  highlighted = true,
  accent = "#241430",
}) {
  return (
    <div style={{ font: "15px system-ui, sans-serif", color: "#241430", maxWidth: 240, padding: 24, borderRadius: 16,
      border: `1.5px solid ${highlighted ? accent : "#24143022"}`, background: "#FAF7F2", position: "relative",
      boxShadow: highlighted ? "0 16px 32px rgba(36,20,48,.14)" : "none" }}>
      {highlighted && (
        <span style={{ position: "absolute", top: -12, left: 24, background: accent, color: "#FAF7F2", fontSize: 11,
          fontWeight: 700, padding: "4px 10px", borderRadius: 999 }}>Most popular</span>
      )}
      <p style={{ margin: "0 0 6px", fontWeight: 700, textTransform: "uppercase", fontSize: 12, letterSpacing: "0.05em", color: "#241430aa" }}>{planName}</p>
      <p style={{ margin: "0 0 18px", fontSize: 34, fontWeight: 800 }}>
        <span style={{ fontSize: 20, verticalAlign: "top" }}>$</span>{price}<small style={{ fontSize: 14, fontWeight: 500, color: "#241430aa" }}>/mo</small>
      </p>
      <ul style={{ listStyle: "none", margin: "0 0 20px", padding: 0, display: "flex", flexDirection: "column", gap: 8, fontSize: 14, color: "#241430cc" }}>
        <li>&#10003; Unlimited projects</li>
        <li>&#10003; Priority support</li>
        <li>&#10003; Team analytics</li>
      </ul>
      <button type="button" style={{ width: "100%", border: `1.5px solid ${accent}`,
        background: highlighted ? accent : "transparent", color: highlighted ? "#FAF7F2" : accent,
        padding: 10, borderRadius: 8, fontWeight: 700, cursor: "pointer" }}>{ctaText}</button>
    </div>
  );
}