Wrapper

Generic grouping/layout container.

html

<div class="wrap-demo wrap-demo--border" style="padding:20px;border-radius:10px;background:#FAF7F2;">
  <div class="wrap-demo__inner">Wrapped content</div>
</div>
<style>
.wrap-demo { box-sizing: border-box; font: 13px system-ui, sans-serif; color: #241430; }
.wrap-demo--border { border: 1.5px solid #24143033; }
.wrap-demo__inner { border: 1px dashed #24143055; padding: 10px; text-align: center; color: #24143099; }
</style>

tailwind

<div class="box-border font-sans text-[13px] text-[#241430] wrap-tw wrap-tw--border" style="padding:20px;border-radius:10px;background:#FAF7F2;">
  <div class="border border-dashed border-[#24143055] p-2.5 text-center text-[#24143099]">Wrapped content</div>
</div>
<style>
.wrap-tw--border { border: 1.5px solid #24143033; }
</style>

react

export function Wrapper({
  label = "Wrapped content",
  padding = 20,
  radius = 10,
  bg = "#FAF7F2",
  border = true,
}) {
  return (
    <div style={{ boxSizing: "border-box", fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430", padding, borderRadius: radius, background: bg, border: border ? "1.5px solid #24143033" : "none" }}>
      <div style={{ border: "1px dashed #24143055", padding: 10, textAlign: "center", color: "#24143099" }}>{label}</div>
    </div>
  );
}