span

Generic inline container.

html

<p class="span-demo">Your invoice is <span class="span-el" style="color:#E8A020;">overdue</span> by 4 days. A <code>&lt;span&gt;</code> carries no meaning — it exists purely to style a run of inline text.</p>
<style>
.span-demo { width: 340px; box-sizing: border-box; font: 15px/1.6 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px 20px; border-radius: 12px; margin: 0; }
.span-demo code { background: #24143012; padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.span-el { font-weight: 700; }
</style>

tailwind

<p class="w-[340px] box-border font-sans text-[15px] leading-relaxed text-[#241430] bg-[#FAF7F2] px-5 py-[18px] rounded-xl m-0">Your invoice is <span class="font-bold" style="color:#E8A020">overdue</span> by 4 days. A <code class="bg-[#24143012] px-1.5 py-0.5 rounded text-[13px]">&lt;span&gt;</code> carries no meaning — it exists purely to style a run of inline text.</p>

react

export function SpanElement({
  before = "Your invoice is ",
  highlighted = "overdue",
  after = " by 4 days.",
  accent = "#E8A020",
}) {
  return (
    <p style={{ width: 340, boxSizing: "border-box", font: "15px/1.6 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: "18px 20px", borderRadius: 12, margin: 0 }}>
      {before}
      <span style={{ fontWeight: 700, color: accent }}>{highlighted}</span>
      {after} A <code style={{ background: "#24143012", padding: "1px 5px", borderRadius: 4, fontSize: 13 }}>&lt;span&gt;</code> carries no meaning — it exists purely to style a run of inline text.
    </p>
  );
}