Estimate

Expected effort/duration.

html

<div class="estimate" data-method="points" style="--accent:#D9C8F0;">
  <p class="estimate__item">Migrate auth service</p>
  <div class="estimate__value estimate__value--points"><span class="estimate__number">5</span><span class="estimate__unit">story points</span></div>
  <div class="estimate__value estimate__value--hours"><span class="estimate__number">8</span><span class="estimate__unit">hours</span></div>
  <div class="estimate__value estimate__value--tshirt"><span class="estimate__number">M</span><span class="estimate__unit">t-shirt size</span></div>
</div>
<style>
.estimate { font:14px/1.4 system-ui, sans-serif; color:#241430; background:#FAF7F2; padding:16px 18px; border-radius:12px; max-width:300px; box-sizing:border-box; text-align:center; }
.estimate__item { margin:0 0 10px; font-size:13px; font-weight:600; color:#241430cc; }
.estimate__value { display:none; flex-direction:column; align-items:center; gap:2px; }
.estimate[data-method="points"] .estimate__value--points,
.estimate[data-method="hours"] .estimate__value--hours,
.estimate[data-method="tshirt"] .estimate__value--tshirt { display:flex; }
.estimate__number { font-size:34px; font-weight:700; color:var(--accent); line-height:1; }
.estimate__unit { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#241430b3; }
</style>

tailwind

<div class="estimate-tw font-sans text-sm text-[#241430] bg-[#FAF7F2] px-[18px] py-4 rounded-xl max-w-[300px] box-border text-center" data-method="points" style="--accent:#D9C8F0;">
  <p class="m-0 mb-2.5 text-[13px] font-semibold text-[#241430]/80">Migrate auth service</p>
  <div class="estimate-tw__value estimate-tw__value--points hidden flex-col items-center gap-0.5">
    <span class="text-[34px] font-bold leading-none" style="color:#D9C8F0">5</span>
    <span class="text-xs uppercase tracking-wide text-[#241430]/70">story points</span>
  </div>
  <div class="estimate-tw__value estimate-tw__value--hours hidden flex-col items-center gap-0.5">
    <span class="text-[34px] font-bold leading-none" style="color:#D9C8F0">8</span>
    <span class="text-xs uppercase tracking-wide text-[#241430]/70">hours</span>
  </div>
  <div class="estimate-tw__value estimate-tw__value--tshirt hidden flex-col items-center gap-0.5">
    <span class="text-[34px] font-bold leading-none" style="color:#D9C8F0">M</span>
    <span class="text-xs uppercase tracking-wide text-[#241430]/70">t-shirt size</span>
  </div>
</div>
<style>
.estimate-tw[data-method="points"] .estimate-tw__value--points,
.estimate-tw[data-method="hours"] .estimate-tw__value--hours,
.estimate-tw[data-method="tshirt"] .estimate-tw__value--tshirt { display:flex; }
</style>

react

export function Estimate({
  itemName = "Migrate auth service",
  points = 5,
  hours = 8,
  method = "points",
  tshirtSize = "M",
  accent = "#D9C8F0",
}) {
  const value = {
    points: { number: points, unit: "story points" },
    hours: { number: hours, unit: "hours" },
    tshirt: { number: tshirtSize, unit: "t-shirt size" },
  }[method] ?? { number: points, unit: "story points" };
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2",
      padding: "16px 18px", borderRadius: 12, maxWidth: 300, boxSizing: "border-box", textAlign: "center" }}>
      <p style={{ margin: "0 0 10px", fontSize: 13, fontWeight: 600, color: "#241430cc" }}>{itemName}</p>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
        <span style={{ fontSize: 34, fontWeight: 700, color: accent, lineHeight: 1 }}>{value.number}</span>
        <span style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: "0.04em", color: "#241430b3" }}>{value.unit}</span>
      </div>
    </div>
  );
}