div

Generic block-level container.

html

<div class="div-demo">
  <p class="div-demo__label">A <code>&lt;div&gt;</code> carries no meaning of its own — it is purely a box for layout and styling</p>
  <div class="div-box div-box--rounded" style="background:#D9C8F0;padding:24px;">Just a box</div>
</div>
<style>
.div-demo { width: 320px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; }
.div-demo__label { margin: 0 0 12px; color: #241430aa; font-size: 13px; }
.div-demo__label code { background: #24143012; padding: 1px 5px; border-radius: 4px; }
.div-box { font-weight: 600; text-align: center; box-sizing: border-box; }
.div-box--square { border-radius: 0; }
.div-box--rounded { border-radius: 12px; }
.div-box--pill { border-radius: 999px; }
</style>

tailwind

<div class="w-[320px] box-border font-sans text-sm text-[#241430]">
  <p class="m-0 mb-3 text-[13px] text-[#241430]/65">A <code class="bg-[#24143012] px-1.5 py-0.5 rounded">&lt;div&gt;</code> carries no meaning of its own — it is purely a box for layout and styling</p>
  <div class="div-box-tw div-box-tw--rounded font-semibold text-center box-border" style="background:#D9C8F0;padding:24px;">Just a box</div>
</div>
<style>
.div-box-tw--square { border-radius: 0; }
.div-box-tw--rounded { border-radius: 12px; }
.div-box-tw--pill { border-radius: 999px; }
</style>

react

export function DivElement({
  text = "Just a box",
  bg = "#D9C8F0",
  padding = 24,
  radius = "rounded",
}) {
  const corner = { square: 0, rounded: 12, pill: 999 }[radius] ?? 12;
  return (
    <div style={{ width: 320, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430" }}>
      <p style={{ margin: "0 0 12px", color: "#241430aa", fontSize: 13 }}>
        A <code style={{ background: "#24143012", padding: "1px 5px", borderRadius: 4 }}>&lt;div&gt;</code> carries no meaning of its own — it is purely a box for layout and styling
      </p>
      <div style={{ background: bg, padding, borderRadius: corner, fontWeight: 600, textAlign: "center", boxSizing: "border-box" }}>{text}</div>
    </div>
  );
}