main

Primary content of the document.

html

<div class="main-demo">
  <div class="main-demo__chrome main-demo__chrome--top">header</div>
  <main class="main-el" style="--accent:#241430;">
    <p class="main-el__tag">&lt;main&gt;</p>
    <h2 class="main-el__heading">Dashboard</h2>
    <p class="main-el__body">The primary content of the page — there is exactly one of this element per page.</p>
  </main>
  <div class="main-demo__chrome main-demo__chrome--bottom">footer</div>
</div>
<style>
.main-demo { width: 340px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; }
.main-demo__chrome { background: #24143012; color: #24143070; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: 8px; }
.main-demo__chrome--top { border-radius: 10px 10px 0 0; }
.main-demo__chrome--bottom { border-radius: 0 0 10px 10px; }
.main-el { background: #FAF7F2; border-left: 4px solid var(--accent); padding: 20px 22px; }
.main-el__tag { margin: 0 0 8px; font: 700 11px ui-monospace, monospace; color: var(--accent); }
.main-el__heading { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #241430; }
.main-el__body { margin: 0; color: #241430cc; }
</style>

tailwind

<div class="w-[340px] box-border font-sans text-sm">
  <div class="bg-[#24143012] text-[#24143070] text-[11px] uppercase tracking-wide text-center py-2 rounded-t-[10px]">header</div>
  <main class="bg-[#FAF7F2] border-l-4 px-[22px] py-5" style="border-color:#241430">
    <p class="m-0 mb-2 font-mono text-[11px] font-bold" style="color:#241430">&lt;main&gt;</p>
    <h2 class="m-0 mb-2 text-xl font-bold text-[#241430]">Dashboard</h2>
    <p class="m-0 text-[#241430]/80">The primary content of the page — there is exactly one of this element per page.</p>
  </main>
  <div class="bg-[#24143012] text-[#24143070] text-[11px] uppercase tracking-wide text-center py-2 rounded-b-[10px]">footer</div>
</div>

react

export function MainElement({
  heading = "Dashboard",
  body = "The primary content of the page — there is exactly one of this element per page.",
  accent = "#241430",
  showChrome = true,
}) {
  const chrome = { background: "#24143012", color: "#24143070", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", textAlign: "center", padding: 8 };
  return (
    <div style={{ width: 340, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif" }}>
      {showChrome && <div style={{ ...chrome, borderRadius: "10px 10px 0 0" }}>header</div>}
      <main style={{ background: "#FAF7F2", borderLeft: `4px solid ${accent}`, padding: "20px 22px" }}>
        <p style={{ margin: "0 0 8px", font: "700 11px ui-monospace, monospace", color: accent }}>&lt;main&gt;</p>
        <h2 style={{ margin: "0 0 8px", fontSize: 20, fontWeight: 700, color: "#241430" }}>{heading}</h2>
        <p style={{ margin: 0, color: "#241430cc" }}>{body}</p>
      </main>
      {showChrome && <div style={{ ...chrome, borderRadius: "0 0 10px 10px" }}>footer</div>}
    </div>
  );
}