Due Date

Completion target date.

html

<div class="due-date" data-urgency="on-track" style="--accent:#BFD9F2;">
  <div class="due-date__main">
    <p class="due-date__item">Publish release notes</p>
    <p class="due-date__date">Due Fri, 22 Aug · 4 days left</p>
  </div>
  <p class="due-date__urgency due-date__urgency--on-track"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8.5l3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>On track</p>
  <p class="due-date__urgency due-date__urgency--due-soon"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.6"/><path d="M8 4.5V8l3 1.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Due soon</p>
  <p class="due-date__urgency due-date__urgency--overdue"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M8 2.5l6.5 11h-13L8 2.5z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8 6.5v3.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="11.6" r=".9" fill="currentColor"/></svg>Overdue</p>
</div>
<style>
.due-date { font:14px/1.4 system-ui, sans-serif; color:#241430; background:#FAF7F2; padding:14px 16px; border-radius:12px; max-width:360px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:12px; border:1.5px solid var(--accent); flex-wrap:wrap; }
.due-date--compact { padding:8px 12px; gap:8px; }
.due-date__item { margin:0; font-weight:600; }
.due-date--compact .due-date__item { font-size:13px; }
.due-date__date { margin:2px 0 0; font-size:12px; color:#241430b3; }
.due-date--compact .due-date__date { margin:0; }
.due-date__urgency { display:none; align-items:center; gap:6px; margin:0; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.due-date[data-urgency="on-track"] .due-date__urgency--on-track { display:flex; background:#cdeedb; color:#1a7a4c; }
.due-date[data-urgency="due-soon"] .due-date__urgency--due-soon { display:flex; background:#fbe6bd; color:#8a5d00; }
.due-date[data-urgency="overdue"] .due-date__urgency--overdue { display:flex; background:#f6d3cd; color:#8a2c1e; }
</style>

tailwind

<div class="due-date-tw font-sans text-sm text-[#241430] bg-[#FAF7F2] rounded-xl max-w-[360px] box-border flex items-center justify-between gap-3 flex-wrap border-[1.5px] px-4 py-3.5" data-urgency="on-track" style="border-color:#BFD9F2;--accent:#BFD9F2;">
  <div>
    <p class="due-date-tw__item m-0 font-semibold">Publish release notes</p>
    <p class="due-date-tw__date mt-0.5 text-xs text-[#241430]/70">Due Fri, 22 Aug · 4 days left</p>
  </div>
  <p class="due-date-tw__urgency due-date-tw__urgency--on-track hidden items-center gap-1.5 m-0 text-xs font-bold px-2.5 py-1 rounded-full whitespace-nowrap bg-[#cdeedb] text-[#1a7a4c]"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8.5l3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>On track</p>
  <p class="due-date-tw__urgency due-date-tw__urgency--due-soon hidden items-center gap-1.5 m-0 text-xs font-bold px-2.5 py-1 rounded-full whitespace-nowrap bg-[#fbe6bd] text-[#8a5d00]"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.6"/><path d="M8 4.5V8l3 1.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Due soon</p>
  <p class="due-date-tw__urgency due-date-tw__urgency--overdue hidden items-center gap-1.5 m-0 text-xs font-bold px-2.5 py-1 rounded-full whitespace-nowrap bg-[#f6d3cd] text-[#8a2c1e]"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M8 2.5l6.5 11h-13L8 2.5z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8 6.5v3.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="11.6" r=".9" fill="currentColor"/></svg>Overdue</p>
</div>
<style>
.due-date-tw--compact { padding:8px 12px !important; gap:8px !important; }
.due-date-tw--compact .due-date-tw__item { font-size:13px; }
.due-date-tw--compact .due-date-tw__date { margin-top:0; }
.due-date-tw[data-urgency="on-track"] .due-date-tw__urgency--on-track,
.due-date-tw[data-urgency="due-soon"] .due-date-tw__urgency--due-soon,
.due-date-tw[data-urgency="overdue"] .due-date-tw__urgency--overdue { display:flex; }
</style>

react

export function DueDate({
  itemName = "Publish release notes",
  dueDate = "Fri, 22 Aug",
  urgency = "on-track",
  daysLeft = 4,
  accent = "#BFD9F2",
  compact = false,
}) {
  const info = {
    "on-track": { text: "On track", bg: "#cdeedb", color: "#1a7a4c" },
    "due-soon": { text: "Due soon", bg: "#fbe6bd", color: "#8a5d00" },
    overdue: { text: "Overdue", bg: "#f6d3cd", color: "#8a2c1e" },
  }[urgency] ?? { text: "On track", bg: "#cdeedb", color: "#1a7a4c" };
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2",
      borderRadius: 12, maxWidth: 360, boxSizing: "border-box", display: "flex", alignItems: "center",
      justifyContent: "space-between", gap: 12, flexWrap: "wrap", border: `1.5px solid ${accent}`,
      padding: compact ? "8px 12px" : "14px 16px" }}>
      <div>
        <p style={{ margin: 0, fontWeight: 600, fontSize: compact ? 13 : 14 }}>{itemName}</p>
        <p style={{ margin: compact ? 0 : "2px 0 0", fontSize: 12, color: "#241430b3" }}>Due {dueDate} · {daysLeft} days left</p>
      </div>
      <p style={{ display: "flex", alignItems: "center", gap: 6, margin: 0, fontSize: 12, fontWeight: 700,
        padding: "4px 10px", borderRadius: 999, whiteSpace: "nowrap", background: info.bg, color: info.color }}>
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
          {urgency === "on-track" && <path d="M3 8.5l3 3 7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />}
          {urgency === "due-soon" && <><circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.6" /><path d="M8 4.5V8l3 1.6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></>}
          {urgency === "overdue" && <><path d="M8 2.5l6.5 11h-13L8 2.5z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" /><path d="M8 6.5v3.2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /><circle cx="8" cy="11.6" r=".9" fill="currentColor" /></>}
        </svg>
        {info.text}
      </p>
    </div>
  );
}