body

Contains visible document content.

Document outline — <body> holds everything a visitor actually sees

<html>
<head>page metadata
<body>
  • <header>nav</header>
  • <main>Our recent work</main>
  • <footer>© Studio</footer>

html

<div class="diagram">
  <p class="diagram__caption">Document outline — <code>&lt;body&gt;</code> holds everything a visitor actually sees</p>
  <div class="diagram__box diagram__box--dim">
    <span class="diagram__tag diagram__tag--dim">&lt;html&gt;</span>
    <div class="diagram__row">
      <div class="diagram__box diagram__box--dim diagram__box--flex"><span class="diagram__tag diagram__tag--dim">&lt;head&gt;</span><span class="diagram__note">page metadata</span></div>
      <div class="diagram__box diagram__box--root" style="--accent:#A8E6C1;">
        <span class="diagram__tag">&lt;body&gt;</span>
        
        <ul class="diagram__list">
          <li>&lt;header&gt;nav&lt;/header&gt;</li>
          <li>&lt;main&gt;Our recent work&lt;/main&gt;</li>
          <li>&lt;footer&gt;© Studio&lt;/footer&gt;</li>
        </ul>
        
      </div>
    </div>
  </div>
</div>
<style>
.diagram { width: 460px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; }
.diagram__caption { margin: 0 0 14px; font-size: 13px; color: #241430aa; }
.diagram__caption code { background: #24143012; padding: 1px 5px; border-radius: 4px; }
.diagram__box { border-radius: 8px; padding: 12px; box-sizing: border-box; }
.diagram__box--root { border: 2.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, #FAF7F2); flex: 1.4; }
.diagram__box--dim { border: 1.5px dashed #24143035; }
.diagram__box--flex { flex: 1; }
.diagram__row { display: flex; gap: 10px; margin-top: 10px; }
.diagram__tag { display: block; font: 700 12px/1 ui-monospace, monospace; color: var(--accent); margin-bottom: 6px; }
.diagram__tag--dim { color: #24143070; }
.diagram__note { display: block; font-size: 11px; color: #241430aa; }
.diagram__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 11px/1.4 ui-monospace, monospace; color: #241430cc; }
</style>

tailwind

<div class="w-[460px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-5 rounded-xl">
  <p class="m-0 mb-3.5 text-[13px] text-[#241430]/65">Document outline — <code class="bg-[#24143012] px-1.5 py-0.5 rounded">&lt;body&gt;</code> holds everything a visitor actually sees</p>
  <div class="rounded-lg p-3 box-border border-[1.5px] border-dashed border-[#24143035]">
    <span class="block font-mono text-xs font-bold mb-1.5 text-[#24143070]">&lt;html&gt;</span>
    <div class="flex gap-2.5 mt-2.5">
      <div class="flex-1 rounded-lg p-3 box-border border-[1.5px] border-dashed border-[#24143035]"><span class="block font-mono text-xs font-bold mb-1.5 text-[#24143070]">&lt;head&gt;</span><span class="block text-[11px] text-[#241430]/65">page metadata</span></div>
      <div class="rounded-lg p-3 box-border border-[2.5px]" style="border-color:#A8E6C1;background:color-mix(in srgb, #A8E6C1 10%, #FAF7F2);flex:1.4;">
        <span class="block font-mono text-xs font-bold mb-1.5" style="color:#A8E6C1">&lt;body&gt;</span>
        
        <ul class="list-none m-0 p-0 grid gap-1 font-mono text-[11px] text-[#241430]/80">
          <li>&lt;header&gt;nav&lt;/header&gt;</li>
          <li>&lt;main&gt;Our recent work&lt;/main&gt;</li>
          <li>&lt;footer&gt;© Studio&lt;/footer&gt;</li>
        </ul>
        
      </div>
    </div>
  </div>
</div>

react

export function BodyElement({
  heading = "Our recent work",
  note = "© Studio",
  accent = "#A8E6C1",
  showChildren = true,
}) {
  return (
    <div style={{ width: 460, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12 }}>
      <p style={{ margin: "0 0 14px", fontSize: 13, color: "#241430aa" }}>
        Document outline — <code style={{ background: "#24143012", padding: "1px 5px", borderRadius: 4 }}>&lt;body&gt;</code> holds everything a visitor actually sees
      </p>
      <div style={{ border: "1.5px dashed #24143035", borderRadius: 8, padding: 12 }}>
        <span style={{ display: "block", font: "700 12px/1 ui-monospace, monospace", color: "#24143070", marginBottom: 6 }}>&lt;html&gt;</span>
        <div style={{ display: "flex", gap: 10, marginTop: 10 }}>
          <div style={{ flex: 1, border: "1.5px dashed #24143035", borderRadius: 8, padding: 12 }}>
            <span style={{ display: "block", font: "700 12px/1 ui-monospace, monospace", color: "#24143070", marginBottom: 6 }}>&lt;head&gt;</span>
            <span style={{ display: "block", fontSize: 11, color: "#241430aa" }}>page metadata</span>
          </div>
          <div style={{ flex: 1.4, border: `2.5px solid ${accent}`, borderRadius: 8, padding: 12, background: `color-mix(in srgb, ${accent} 10%, #FAF7F2)` }}>
            <span style={{ display: "block", font: "700 12px/1 ui-monospace, monospace", color: accent, marginBottom: 6 }}>&lt;body&gt;</span>
            {showChildren && (
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 4, font: "11px/1.4 ui-monospace, monospace", color: "#241430cc" }}>
                <li>&lt;header&gt;nav&lt;/header&gt;</li>
                <li>{`<main>${heading}</main>`}</li>
                <li>{`<footer>${note}</footer>`}</li>
              </ul>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}