Prompt

Instruction/request supplied to AI.

html

<div class="prompt-block prompt-block--user" style="--accent:#BFD9F2;">
  <span class="prompt-block__role">user</span>
  <p class="prompt-block__text">Summarise the attached report in three bullet points for a non-technical reader.</p>
</div>
<style>
.prompt-block { max-width: 480px; padding: 14px 16px; border-radius: 10px; background: #FAF7F2; color: #241430; border-left: 3px solid var(--accent); box-shadow: 0 1px 3px rgba(36,20,48,.08); box-sizing: border-box; font: 15px/1.5 system-ui, sans-serif; }
.prompt-block--system { background: #24143008; }
.prompt-block--user { background: color-mix(in srgb, var(--accent) 10%, #FAF7F2); }
.prompt-block__role { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 6px; }
.prompt-block__role::before { content: ""; }
.prompt-block--system .prompt-block__role::before { content: "instructions to AI: "; color: #24143080; }
.prompt-block--user .prompt-block__role::before { content: "asked by user: "; color: #24143080; }
.prompt-block__text { margin: 0; }
.prompt-block__text--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: #24143010; padding: 10px; border-radius: 6px; white-space: pre-wrap; }
</style>

tailwind

<div class="prompt-block-tw prompt-block-tw--user max-w-lg p-3.5 rounded-lg bg-[#FAF7F2] text-[#241430] border-l-[3px] shadow-sm box-border font-sans text-[15px]" style="--accent:#BFD9F2;border-left-color:var(--accent);">
  <span class="prompt-block-tw__role block text-[11px] font-bold uppercase tracking-wide mb-1.5" style="color:var(--accent);">user</span>
  <p class="prompt-block-tw__text m-0">Summarise the attached report in three bullet points for a non-technical reader.</p>
</div>
<style>
.prompt-block-tw--system { background: #24143008; }
.prompt-block-tw--user { background: color-mix(in srgb, var(--accent) 10%, #FAF7F2); }
.prompt-block-tw__role::before { content: ""; }
.prompt-block-tw--system .prompt-block-tw__role::before { content: "instructions to AI: "; color: #24143080; }
.prompt-block-tw--user .prompt-block-tw__role::before { content: "asked by user: "; color: #24143080; }
.prompt-block-tw__text--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: #24143010; padding: 10px; border-radius: 6px; white-space: pre-wrap; }
</style>

react

export function Prompt({
  text = "Summarise the attached report in three bullet points for a non-technical reader.",
  role = "user",
  accent = "#BFD9F2",
  monospace = false,
}) {
  const prefix = { system: "Instructions to AI: ", user: "Asked by user: " }[role] ?? "";
  const wrapBg = role === "system" ? "#24143008" : `color-mix(in srgb, ${accent} 10%, #FAF7F2)`;
  const textStyle = monospace
    ? { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 13, background: "#24143010", padding: 10, borderRadius: 6, whiteSpace: "pre-wrap", margin: 0 }
    : { margin: 0 };
  return (
    <div style={{ maxWidth: 480, padding: "14px 16px", borderRadius: 10, background: wrapBg, color: "#241430", borderLeft: `3px solid ${accent}`, boxShadow: "0 1px 3px rgba(36,20,48,.08)", boxSizing: "border-box", font: "15px/1.5 system-ui, sans-serif" }}>
      <span style={{ display: "inline-block", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".06em", color: accent, marginBottom: 6 }}>
        {prefix}{role}
      </span>
      <p style={textStyle}>{text}</p>
    </div>
  );
}