Template

Reusable page/layout structure.

html

<div class="tmpl tmpl--sidebar" role="img" aria-label="Dashboard template, sidebar layout">
  <p class="tmpl__name">Dashboard template</p>
  <div class="tmpl__header" style="background:#BFD9F2;">header</div>
  <div class="tmpl__body">
    <div class="tmpl__sidebar">nav</div>
    <div class="tmpl__content tmpl__content--a">content</div>
    <div class="tmpl__content tmpl__content--b">content</div>
  </div>
  <div class="tmpl__footer">footer</div>
</div>
<style>
.tmpl { font: 11px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.tmpl__name { margin: 0 0 10px; font-size: 13px; font-weight: 700; }
.tmpl__header { padding: 8px; border-radius: 6px; text-align: center; font-weight: 600; color: #241430; margin-bottom: 6px; }
.tmpl__body { display: flex; gap: 6px; min-height: 70px; }
.tmpl__sidebar { display: none; background: #24143014; border-radius: 6px; padding: 8px; width: 60px; text-align: center; }
.tmpl__content { background: #24143008; border-radius: 6px; padding: 8px; flex: 1; text-align: center; display: none; }
.tmpl__content--b { display: none; }
.tmpl--sidebar .tmpl__sidebar { display: block; }
.tmpl--sidebar .tmpl__content--a { display: block; }
.tmpl--full-width .tmpl__content--a { display: block; }
.tmpl--split .tmpl__content--a, .tmpl--split .tmpl__content--b { display: block; }
.tmpl__footer { margin-top: 6px; padding: 8px; border-radius: 6px; background: #24143014; text-align: center; }
</style>

tailwind

<div class="tmpltw tmpltw--sidebar font-sans text-[11px] text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border" role="img" aria-label="Dashboard template, sidebar layout">
  <p class="m-0 mb-2.5 text-[13px] font-bold">Dashboard template</p>
  <div class="py-2 rounded-md text-center font-semibold mb-1.5" style="background:#BFD9F2;">header</div>
  <div class="flex gap-1.5 min-h-[70px]">
    <div class="tmpltw__sidebar hidden bg-[#24143014] rounded-md p-2 w-[60px] text-center">nav</div>
    <div class="tmpltw__content tmpltw__content--a hidden bg-[#24143008] rounded-md p-2 flex-1 text-center">content</div>
    <div class="tmpltw__content tmpltw__content--b hidden bg-[#24143008] rounded-md p-2 flex-1 text-center">content</div>
  </div>
  <div class="mt-1.5 py-2 rounded-md bg-[#24143014] text-center">footer</div>
</div>
<style>
.tmpltw--sidebar .tmpltw__sidebar, .tmpltw--sidebar .tmpltw__content--a, .tmpltw--full-width .tmpltw__content--a, .tmpltw--split .tmpltw__content--a, .tmpltw--split .tmpltw__content--b { display: block; }
</style>

react

export function Template({
  pageTitle = "Dashboard template",
  layout = "sidebar",
  accent = "#BFD9F2",
  showFooter = true,
}) {
  const regionBox = { background: "#24143008", borderRadius: 6, padding: 8, flex: 1, textAlign: "center" };
  return (
    <div role="img" aria-label={`${pageTitle}, ${layout} layout`} style={{ font: "11px system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 10px", fontSize: 13, fontWeight: 700 }}>{pageTitle}</p>
      <div style={{ padding: 8, borderRadius: 6, textAlign: "center", fontWeight: 600, background: accent, marginBottom: 6 }}>header</div>
      <div style={{ display: "flex", gap: 6, minHeight: 70 }}>
        {layout === "sidebar" && <div style={{ background: "#24143014", borderRadius: 6, padding: 8, width: 60, textAlign: "center" }}>nav</div>}
        {(layout === "sidebar" || layout === "full-width" || layout === "split") && <div style={regionBox}>content</div>}
        {layout === "split" && <div style={regionBox}>content</div>}
      </div>
      {showFooter && <div style={{ marginTop: 6, padding: 8, borderRadius: 6, background: "#24143014", textAlign: "center" }}>footer</div>}
    </div>
  );
}