Generated Content

AI-produced content.

html

<div class="generated-content" style="--accent:#D9C8F0;">
  
  <div class="generated-content__provenance">
    <span class="generated-content__dot" aria-hidden="true"></span>
    Generated by AI
  </div>
  
  <div class="generated-content__type">summary</div>
  <div class="generated-content__body generated-content__body--summary">This summary was drafted from the last twelve support tickets and highlights the three most common causes of login failure.</div>
</div>
<style>
.generated-content { max-width: 520px; padding: 16px 18px; border-radius: 12px; background: #FAF7F2; color: #241430; border: 1px solid #24143020; box-sizing: border-box; font: 15px/1.55 system-ui, sans-serif; }
.generated-content__provenance { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: 10px; }
.generated-content__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.generated-content__type { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #24143080; margin-bottom: 6px; }
.generated-content__body { margin: 0; }
.generated-content__body--code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: #24143010; padding: 12px; border-radius: 8px; white-space: pre-wrap; }
.generated-content__body--summary { font-style: italic; padding-left: 12px; border-left: 3px solid var(--accent); }
.generated-content__body--text { padding: 0; }
</style>

tailwind

<div class="generated-content-tw max-w-lg p-4 rounded-xl bg-[#FAF7F2] text-[#241430] border border-[#24143020] box-border font-sans text-[15px] leading-[1.55]" style="--accent:#D9C8F0;">
  
  <div class="inline-flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wide mb-2.5" style="color:var(--accent);">
    <span class="w-1.5 h-1.5 rounded-full" style="background:var(--accent);" aria-hidden="true"></span>
    Generated by AI
  </div>
  
  <div class="text-[11px] font-semibold uppercase tracking-wide text-[#24143080] mb-1.5">summary</div>
  <div class="generated-content-tw__body generated-content-tw__body--summary m-0">This summary was drafted from the last twelve support tickets and highlights the three most common causes of login failure.</div>
</div>
<style>
.generated-content-tw__body--code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: #24143010; padding: 12px; border-radius: 8px; white-space: pre-wrap; }
.generated-content-tw__body--summary { font-style: italic; padding-left: 12px; border-left: 3px solid var(--accent); }
</style>

react

export function GeneratedContent({
  content = "This summary was drafted from the last twelve support tickets and highlights the three most common causes of login failure.",
  contentType = "summary",
  accent = "#D9C8F0",
  showProvenance = true,
}) {
  const bodyStyle = {
    code: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 13, background: "#24143010", padding: 12, borderRadius: 8, whiteSpace: "pre-wrap", margin: 0 },
    summary: { fontStyle: "italic", paddingLeft: 12, borderLeft: `3px solid ${accent}`, margin: 0 },
    text: { margin: 0 },
  }[contentType] ?? { margin: 0 };
  return (
    <div style={{ maxWidth: 520, padding: "16px 18px", borderRadius: 12, background: "#FAF7F2", color: "#241430", border: "1px solid #24143020", boxSizing: "border-box", font: "15px/1.55 system-ui, sans-serif" }}>
      {showProvenance && (
        <div style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".05em", color: accent, marginBottom: 10 }}>
          <span aria-hidden="true" style={{ width: 6, height: 6, borderRadius: "50%", background: accent, flex: "none" }} />
          Generated by AI
        </div>
      )}
      <div style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".05em", color: "#24143080", marginBottom: 6 }}>{contentType}</div>
      <div style={bodyStyle}>{content}</div>
    </div>
  );
}