Task Card

Task summary.

html

<article class="taskcard taskcard--high " style="--c:#F5C2E0;">
  <label class="taskcard__check">
    <input type="checkbox" >
    <span class="taskcard__box" aria-hidden="true">✓</span>
  </label>
  <div class="taskcard__text">
    <h3 class="taskcard__title">Draft Q4 roadmap</h3>
    <p class="taskcard__meta">Jordan Lee · Due 22 Aug · <span class="taskcard__priority"></span></p>
  </div>
</article>
<style>
.taskcard { display: flex; gap: 10px; align-items: flex-start; font: 13px system-ui, sans-serif; color: #241430; border: 1px solid #24143018; border-radius: 10px; padding: 12px; max-width: 300px; }
.taskcard__check { position: relative; cursor: pointer; flex: none; }
.taskcard__check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.taskcard__box { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #24143033; color: transparent; font-size: 12px; }
.taskcard__check input:checked + .taskcard__box { background: var(--c); border-color: var(--c); color: #241430; }
.taskcard__check input:focus-visible + .taskcard__box { outline: 2px solid var(--c); outline-offset: 2px; }
.taskcard__title { margin: 0; font-size: 14px; }
.taskcard--done .taskcard__title { text-decoration: line-through; opacity: .55; }
.taskcard__meta { margin: 4px 0 0; font-size: 12px; opacity: .7; }
.taskcard__priority { font-weight: 700; }
.taskcard--low .taskcard__priority::before { content: "Low"; }
.taskcard--medium .taskcard__priority::before { content: "Medium"; }
.taskcard--high .taskcard__priority::before { content: "High"; color: #E8A020; }
.taskcard--urgent .taskcard__priority::before { content: "Urgent"; color: #b3261e; }
</style>

tailwind

<article class="taskcard-tw taskcard-tw--high  flex gap-2.5 items-start font-sans text-[13px] text-[#241430] border border-[#24143018] rounded-[10px] p-3 max-w-xs" style="--c:#F5C2E0;">
  <label class="relative cursor-pointer flex-none">
    <input type="checkbox" class="absolute opacity-0 w-px h-px" >
    <span class="taskcard-tw__box flex items-center justify-center w-[18px] h-[18px] rounded-[5px] border-[1.5px] border-[#24143033] text-transparent text-xs" aria-hidden="true">✓</span>
  </label>
  <div>
    <h3 class="taskcard-tw__title m-0 text-sm">Draft Q4 roadmap</h3>
    <p class="mt-1 mb-0 text-xs opacity-70">Jordan Lee · Due 22 Aug · <span class="taskcard-tw__priority font-bold"></span></p>
  </div>
</article>
<style>
.taskcard-tw--done .taskcard-tw__title { text-decoration: line-through; opacity: .55; }
.taskcard-tw--low .taskcard-tw__priority::before { content: "Low"; }
.taskcard-tw--medium .taskcard-tw__priority::before { content: "Medium"; }
.taskcard-tw--high .taskcard-tw__priority::before { content: "High"; color: #E8A020; }
.taskcard-tw--urgent .taskcard-tw__priority::before { content: "Urgent"; color: #b3261e; }
</style>

react

export function TaskCard({
  title = "Draft Q4 roadmap",
  assignee = "Jordan Lee",
  due = "22 Aug",
  priority = "high",
  done = false,
  color = "#F5C2E0",
}) {
  const priorityText = { low: "Low", medium: "Medium", high: "High", urgent: "Urgent" }[priority] ?? "Medium";
  const priorityColor = { low: "#241430", medium: "#241430", high: "#E8A020", urgent: "#b3261e" }[priority] ?? "#241430";
  return (
    <article style={{ display: "flex", gap: 10, alignItems: "flex-start", font: "13px system-ui, sans-serif", color: "#241430", border: "1px solid #24143018", borderRadius: 10, padding: 12, maxWidth: 300 }}>
      <label style={{ position: "relative", cursor: "pointer", flex: "none" }}>
        <input type="checkbox" defaultChecked={done} style={{ position: "absolute", opacity: 0, width: 1, height: 1 }} />
        <span aria-hidden="true" style={{
          display: "flex", alignItems: "center", justifyContent: "center", width: 18, height: 18, borderRadius: 5, fontSize: 12,
          border: "1.5px solid " + (done ? color : "#24143033"), background: done ? color : "transparent", color: done ? "#241430" : "transparent",
        }}>✓</span>
      </label>
      <div>
        <h3 style={{ margin: 0, fontSize: 14, textDecoration: done ? "line-through" : "none", opacity: done ? 0.55 : 1 }}>{title}</h3>
        <p style={{ margin: "4px 0 0", fontSize: 12, opacity: 0.7 }}>{assignee} · Due {due} · <span style={{ fontWeight: 700, color: priorityColor }}>{priorityText}</span></p>
      </div>
    </article>
  );
}