Container

Wrapper limiting content width.

html

<div class="container-demo">
  <div class="container-demo__box container-demo__box--center" style="max-width:420px;padding-left:16px;padding-right:16px;background:#FAF7F2;">
    Container
  </div>
</div>
<style>
.container-demo { background: repeating-linear-gradient(90deg, #24143014 0 1px, transparent 1px 40px); padding: 16px 0; font: 14px system-ui, sans-serif; color: #241430; }
.container-demo__box { box-sizing: border-box; margin: 0 auto; padding-top: 24px; padding-bottom: 24px; border: 1.5px dashed #24143055; text-align: center; font-weight: 600; }
.container-demo__box--left { margin-left: 12px; margin-right: auto; }
</style>

tailwind

<div class="font-sans text-sm text-[#241430] py-4" style="background-image:repeating-linear-gradient(90deg, #24143014 0 1px, transparent 1px 40px);">
  <div class="box-border py-6 border-[1.5px] border-dashed border-[#24143055] text-center font-semibold container-tw container-tw--center" style="max-width:420px;padding-left:16px;padding-right:16px;background:#FAF7F2;">
    Container
  </div>
</div>
<style>
.container-tw { margin-left: auto; margin-right: auto; }
.container-tw--left { margin-left: 12px; margin-right: auto; }
</style>

react

export function Container({
  label = "Container",
  maxWidth = 420,
  gutter = 16,
  align = "center",
  bg = "#FAF7F2",
}) {
  return (
    <div style={{ background: "repeating-linear-gradient(90deg, #24143014 0 1px, transparent 1px 40px)", padding: "16px 0", fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <div style={{
        boxSizing: "border-box", maxWidth, paddingLeft: gutter, paddingRight: gutter, paddingTop: 24, paddingBottom: 24,
        background: bg, border: "1.5px dashed #24143055", textAlign: "center", fontWeight: 600,
        marginLeft: align === "left" ? 12 : "auto", marginRight: "auto",
      }}>
        {label}
      </div>
    </div>
  );
}