Comment

User-generated response.

html

<article class="comment">
  <span class="comment__avatar" style="background:#F5C2E0;" aria-hidden="true">ML</span>
  <div class="comment__body">
    <header class="comment__header">
      <span class="comment__author">Morgan Lee</span>
      <time class="comment__time" datetime="2026-08-18T09:00">2 hours ago</time>
      
    </header>
    <p class="comment__text">Thanks for looking into this — the timeline now makes sense.</p>
  </div>
</article>
<style>
.comment { display: flex; gap: 12px; max-width: 420px; font: 14px/1.5 system-ui, sans-serif; color: #241430; }
.comment__avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #FAF7F2; font: 700 12px/1 system-ui, sans-serif; }
.comment__body { flex: 1; min-width: 0; }
.comment__header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.comment__author { font-weight: 600; }
.comment__time { font-size: 12px; color: #24143080; }
.comment__edited { font-size: 12px; color: #24143080; font-style: italic; }
.comment__text { margin: 6px 0 0; }
</style>

tailwind

<article class="flex gap-3 max-w-[420px] font-sans text-sm text-[#241430]">
  <span class="w-9 h-9 rounded-full flex-shrink-0 grid place-items-center text-[#FAF7F2] text-xs font-bold" style="background:#F5C2E0" aria-hidden="true">ML</span>
  <div class="flex-1 min-w-0">
    <header class="flex items-baseline gap-2 flex-wrap">
      <span class="font-semibold">Morgan Lee</span>
      <time class="text-xs text-[#241430]/50" datetime="2026-08-18T09:00">2 hours ago</time>
      
    </header>
    <p class="mt-1.5 mb-0">Thanks for looking into this — the timeline now makes sense.</p>
  </div>
</article>

react

export function Comment({
  author = "Morgan Lee",
  initials = "ML",
  body = "Thanks for looking into this — the timeline now makes sense.",
  timestamp = "2 hours ago",
  accent = "#F5C2E0",
  edited = false,
}) {
  return (
    <article style={{ display: "flex", gap: 12, maxWidth: 420, fontFamily: "system-ui, sans-serif", fontSize: 14, lineHeight: 1.5, color: "#241430" }}>
      <span style={{ width: 36, height: 36, borderRadius: "50%", flexShrink: 0, display: "grid", placeItems: "center", background: accent, color: "#FAF7F2", fontSize: 12, fontWeight: 700 }} aria-hidden="true">{initials}</span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <header style={{ display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }}>
          <span style={{ fontWeight: 600 }}>{author}</span>
          <time style={{ fontSize: 12, color: "#24143080" }} dateTime="2026-08-18T09:00">{timestamp}</time>
          {edited && <span style={{ fontSize: 12, color: "#24143080", fontStyle: "italic" }}>(edited)</span>}
        </header>
        <p style={{ margin: "6px 0 0" }}>{body}</p>
      </div>
    </article>
  );
}