p

Paragraph.

html

<div class="p-demo">
  <p class="p-el p-el--body p-el--measure" style="color:#241430;">A paragraph is the basic unit of prose — one idea, set off by margin above and below, nothing more.</p>
</div>
<style>
.p-demo { width: 380px; box-sizing: border-box; font-family: system-ui, sans-serif; background: #FAF7F2; padding: 20px; border-radius: 12px; }
.p-el { margin: 0; }
.p-el--measure { max-width: 34ch; }
.p-el--lead { font-size: 19px; line-height: 1.5; font-weight: 500; }
.p-el--body { font-size: 15px; line-height: 1.65; }
.p-el--small { font-size: 13px; line-height: 1.55; opacity: .75; }
</style>

tailwind

<div class="w-[380px] box-border font-sans bg-[#FAF7F2] p-5 rounded-xl">
  <p class="p-tw-el p-tw-el--body m-0 max-w-[34ch]" style="color:#241430">A paragraph is the basic unit of prose — one idea, set off by margin above and below, nothing more.</p>
</div>
<style>
.p-tw-el--lead { font-size: 19px; line-height: 1.5; font-weight: 500; }
.p-tw-el--body { font-size: 15px; line-height: 1.65; }
.p-tw-el--small { font-size: 13px; line-height: 1.55; opacity: .75; }
</style>

react

export function PElement({
  text = "A paragraph is the basic unit of prose — one idea, set off by margin above and below, nothing more.",
  size = "body",
  accent = "#241430",
  measure = true,
}) {
  const sizes = {
    lead: { fontSize: 19, lineHeight: 1.5, fontWeight: 500 },
    body: { fontSize: 15, lineHeight: 1.65 },
    small: { fontSize: 13, lineHeight: 1.55, opacity: 0.75 },
  };
  return (
    <div style={{ width: 380, boxSizing: "border-box", fontFamily: "system-ui, sans-serif", background: "#FAF7F2", padding: 20, borderRadius: 12 }}>
      <p style={{ margin: 0, color: accent, maxWidth: measure ? "34ch" : "none", ...(sizes[size] ?? sizes.body) }}>{text}</p>
    </div>
  );
}