Task

Work item requiring completion.

html

<div class="task-row" style="--accent: #BFD9F2;">
  <label class="task-row__check">
    <input type="checkbox" >
    <span class="task-row__box" aria-hidden="true"></span>
  </label>
  <span class="task-row__title">Update pricing copy</span>
  <span class="task-row__due" data-due="This week">This week</span>
  <span class="task-row__avatar">JM</span>
</div>
<style>
.task-row { display: flex; align-items: center; gap: 10px; font-family: system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 10px 14px; border-radius: 8px; border: 1px solid #24143018; max-width: 420px; box-sizing: border-box; }
.task-row__check { position: relative; display: inline-flex; cursor: pointer; flex: 0 0 auto; }
.task-row__check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.task-row__box { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid #241430; display: inline-block; box-sizing: border-box; }
.task-row__check input:checked + .task-row__box { background: var(--accent); border-color: var(--accent); position: relative; }
.task-row__check input:checked + .task-row__box::after { content: "\2713"; display: block; text-align: center; line-height: 17px; font-size: 13px; color: #241430; }
.task-row__check input:focus-visible + .task-row__box { outline: 2px solid #241430; outline-offset: 2px; }
.task-row__title { flex: 1 1 auto; font-size: 14px; }
.task-row--done .task-row__title { text-decoration: line-through; opacity: .6; }
.task-row__due { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; flex: 0 0 auto; }
.task-row__due[data-due="Today"] { background: #F5C2E060; color: #8a1050; }
.task-row__due[data-due="This week"] { background: #BFD9F260; color: #1a3a5c; }
.task-row__due[data-due="Overdue"] { background: #E8A02040; color: #7a4b06; }
.task-row__avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #241430; flex: 0 0 auto; }
</style>

tailwind

<div class="task-row-tw flex items-center gap-2.5 font-sans text-[#241430] bg-[#FAF7F2] px-3.5 py-2.5 rounded-lg border border-[#24143018] max-w-[420px] box-border" style="--accent: #BFD9F2;">
  <label class="task-row-tw__check relative inline-flex cursor-pointer flex-none">
    <input type="checkbox" class="absolute opacity-0 w-5 h-5 m-0 cursor-pointer" >
    <span class="task-row-tw__box w-5 h-5 rounded-[5px] border-[1.5px] border-[#241430] inline-block box-border" aria-hidden="true"></span>
  </label>
  <span class="task-row-tw__title flex-1 text-sm">Update pricing copy</span>
  <span class="text-[11px] font-bold px-2 py-[3px] rounded-full flex-none" data-due="This week">This week</span>
  <span class="w-6 h-6 rounded-full inline-flex items-center justify-center text-[10px] font-bold flex-none" style="background: var(--accent);">JM</span>
</div>
<style>
.task-row-tw__check input:checked + .task-row-tw__box { background: var(--accent); border-color: var(--accent); position: relative; }
.task-row-tw__check input:checked + .task-row-tw__box::after { content: "\2713"; display: block; text-align: center; line-height: 17px; font-size: 13px; color: #241430; }
.task-row-tw__check input:focus-visible + .task-row-tw__box { outline: 2px solid #241430; outline-offset: 2px; }
.task-row-tw--done .task-row-tw__title { text-decoration: line-through; opacity: .6; }
[data-due="Today"] { background: #F5C2E060; color: #8a1050; }
[data-due="This week"] { background: #BFD9F260; color: #1a3a5c; }
[data-due="Overdue"] { background: #E8A02040; color: #7a4b06; }
</style>

react

export function TaskRow({
  title = "Update pricing copy",
  assignee = "JM",
  done = false,
  due = "This week",
  accent = "#BFD9F2",
}) {
  const dueStyle = {
    "Today": { background: "#F5C2E060", color: "#8a1050" },
    "This week": { background: "#BFD9F260", color: "#1a3a5c" },
    "Overdue": { background: "#E8A02040", color: "#7a4b06" },
  }[due] ?? {};
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, fontFamily: "system-ui, sans-serif",
      color: "#241430", background: "#FAF7F2", padding: "10px 14px", borderRadius: 8,
      border: "1px solid #24143018", maxWidth: 420, boxSizing: "border-box" }}>
      <label style={{ position: "relative", display: "inline-flex", cursor: "pointer", flex: "0 0 auto" }}>
        <input type="checkbox" checked={done} readOnly style={{ position: "absolute", opacity: 0, width: 20, height: 20, margin: 0, cursor: "pointer" }} />
        <span aria-hidden="true" style={{ width: 20, height: 20, borderRadius: 5, boxSizing: "border-box",
          border: "1.5px solid " + (done ? accent : "#241430"), background: done ? accent : "transparent",
          display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 13, color: "#241430" }}>
          {done ? "\u2713" : ""}
        </span>
      </label>
      <span style={{ flex: "1 1 auto", fontSize: 14, textDecoration: done ? "line-through" : "none", opacity: done ? 0.6 : 1 }}>{title}</span>
      <span style={{ fontSize: 11, fontWeight: 700, padding: "3px 8px", borderRadius: 999, flex: "0 0 auto", ...dueStyle }}>{due}</span>
      <span style={{ width: 24, height: 24, borderRadius: "50%", background: accent, display: "inline-flex",
        alignItems: "center", justifyContent: "center", fontSize: 10, fontWeight: 700, color: "#241430", flex: "0 0 auto" }}>{assignee}</span>
    </div>
  );
}