Comment Thread

Conversation around content.

html

<div class="comment-thread" data-resolved="false" style="--accent:#D9C8F0;">
  <article class="comment-thread__root">
    <span class="comment-thread__avatar" style="background:#D9C8F0;" aria-hidden="true">Dana Wu</span>
    <div>
      <p class="comment-thread__author">Dana Wu</p>
      <p class="comment-thread__text">The onboarding checklist skips the payment step.</p>
    </div>
    
  </article>
  <p class="comment-thread__count">3 replies</p>
  <button class="comment-thread__reply" type="button">Reply</button>
</div>
<style>
.comment-thread { max-width: 380px; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1px solid #24143020; border-radius: 12px; padding: 14px 16px; box-sizing: border-box; }
.comment-thread__root { display: flex; align-items: flex-start; gap: 10px; }
.comment-thread__avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #FAF7F2; font: 700 11px/1 system-ui, sans-serif; }
.comment-thread__author { margin: 0; font-weight: 600; }
.comment-thread__text { margin: 2px 0 0; }
.comment-thread__badge { margin-left: auto; background: var(--accent); color: #241430; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.comment-thread[data-resolved="true"] .comment-thread__root { opacity: .6; }
.comment-thread__count { margin: 10px 0 8px; font-size: 12px; color: #24143080; padding-left: 40px; }
.comment-thread__reply { margin-left: 40px; background: transparent; border: 1.5px solid var(--accent); color: #241430; padding: 6px 12px; border-radius: 8px; font: 500 13px system-ui, sans-serif; cursor: pointer; }
.comment-thread__reply:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.comment-thread__reply:hover { background: #24143010; }
</style>

tailwind

<div data-resolved="false" class="comment-thread-tw max-w-[380px] font-sans text-sm text-[#241430] bg-[#FAF7F2] border border-[#24143020] rounded-xl p-4 box-border">
  <article class="comment-thread-tw__root flex items-start gap-2.5">
    <span class="w-[30px] h-[30px] rounded-full flex-shrink-0 grid place-items-center text-[#FAF7F2] text-[11px] font-bold" style="background:#D9C8F0" aria-hidden="true">Dana Wu</span>
    <div>
      <p class="m-0 font-semibold">Dana Wu</p>
      <p class="mt-0.5 mb-0">The onboarding checklist skips the payment step.</p>
    </div>
    
  </article>
  <p class="mt-2.5 mb-2 text-xs text-[#241430]/50 pl-10">3 replies</p>
  <button type="button" class="ml-10 bg-transparent border-[1.5px] text-[#241430] px-3 py-1.5 rounded-lg text-[13px] font-medium cursor-pointer hover:bg-[#24143010]" style="border-color:#D9C8F0">Reply</button>
</div>
<style>
.comment-thread-tw[data-resolved="true"] .comment-thread-tw__root { opacity: .6; }
</style>

react

export function CommentThread({
  author = "Dana Wu",
  topic = "The onboarding checklist skips the payment step.",
  replyCount = 3,
  resolved = false,
  accent = "#D9C8F0",
}) {
  return (
    <div style={{ maxWidth: 380, fontFamily: "system-ui, sans-serif", fontSize: 14, lineHeight: 1.5, color: "#241430", background: "#FAF7F2", border: "1px solid #24143020", borderRadius: 12, padding: "14px 16px", boxSizing: "border-box" }}>
      <article style={{ display: "flex", alignItems: "flex-start", gap: 10, opacity: resolved ? 0.6 : 1 }}>
        <span style={{ width: 30, height: 30, borderRadius: "50%", flexShrink: 0, display: "grid", placeItems: "center", background: accent, color: "#FAF7F2", fontSize: 11, fontWeight: 700 }} aria-hidden="true">{author}</span>
        <div>
          <p style={{ margin: 0, fontWeight: 600 }}>{author}</p>
          <p style={{ margin: "2px 0 0" }}>{topic}</p>
        </div>
        {resolved && (
          <span style={{ marginLeft: "auto", background: accent, color: "#241430", fontSize: 11, fontWeight: 600, padding: "3px 8px", borderRadius: 999, whiteSpace: "nowrap" }}>Resolved</span>
        )}
      </article>
      <p style={{ margin: "10px 0 8px", fontSize: 12, color: "#24143080", paddingLeft: 40 }}>{replyCount} replies</p>
      <button type="button" style={{ marginLeft: 40, background: "transparent", border: `1.5px solid ${accent}`, color: "#241430", padding: "6px 12px", borderRadius: 8, fontSize: 13, fontWeight: 500, cursor: "pointer" }}>Reply</button>
    </div>
  );
}