Divider

Visual separation between sections.

Section A
OR
Section B

html

<div class="div-demo div-demo--horizontal">
  <div class="div-demo__block">Section A</div>
  <div class="div-demo__line-wrap">
    <span class="div-demo__line" style="background:#241430;--thick:2px;"></span>
    <span class="div-demo__inset" style="color:#241430;">OR</span>
  </div>
  <div class="div-demo__block">Section B</div>
</div>
<style>
.div-demo { display: flex; font: 13px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; align-items: center; }
.div-demo--vertical { flex-direction: row; height: 90px; }
.div-demo--horizontal { flex-direction: column; }
.div-demo__block { flex: 1; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #24143018; border-radius: 6px; padding: 14px; }
.div-demo__line-wrap { position: relative; display: flex; align-items: center; justify-content: center; flex: none; }
.div-demo--horizontal .div-demo__line-wrap { width: 100%; padding: 8px 0; }
.div-demo--vertical .div-demo__line-wrap { height: 100%; padding: 0 8px; }
.div-demo--horizontal .div-demo__line { width: 100%; height: var(--thick); }
.div-demo--vertical .div-demo__line { height: 100%; width: var(--thick); }
.div-demo__inset { position: absolute; background: #FAF7F2; padding: 0 8px; font-weight: 700; font-size: 11px; }
</style>

tailwind

<div class="flex items-center font-sans text-[13px] text-[#241430] bg-[#FAF7F2] p-4 div-tw div-tw--horizontal">
  <div class="flex-1 flex items-center justify-center bg-white border border-[#24143018] rounded-md p-3.5">Section A</div>
  <div class="relative flex items-center justify-center flex-none div-tw__wrap">
    <span class="div-tw__line" style="background:#241430;--thick:2px;"></span>
    <span class="absolute bg-[#FAF7F2] px-2 font-bold text-[11px]" style="color:#241430;">OR</span>
  </div>
  <div class="flex-1 flex items-center justify-center bg-white border border-[#24143018] rounded-md p-3.5">Section B</div>
</div>
<style>
.div-tw--vertical { height: 90px; }
.div-tw--horizontal { flex-direction: column; }
.div-tw--horizontal .div-tw__wrap { width: 100%; padding: 8px 0; }
.div-tw--vertical .div-tw__wrap { height: 100%; padding: 0 8px; }
.div-tw--horizontal .div-tw__line { width: 100%; height: var(--thick); }
.div-tw--vertical .div-tw__line { height: 100%; width: var(--thick); }
</style>

react

export function Divider({
  orientation = "horizontal",
  thickness = 2,
  color = "#241430",
  label = "OR",
  inset = true,
}) {
  const vertical = orientation === "vertical";
  return (
    <div style={{ display: "flex", flexDirection: vertical ? "row" : "column", alignItems: "center", fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430", background: "#FAF7F2", padding: 16, height: vertical ? 90 : "auto" }}>
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", background: "#fff", border: "1px solid #24143018", borderRadius: 6, padding: 14 }}>Section A</div>
      <div style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "center", flex: "none", width: vertical ? "auto" : "100%", height: vertical ? "100%" : "auto", padding: vertical ? "0 8px" : "8px 0" }}>
        <span style={{ background: color, width: vertical ? thickness : "100%", height: vertical ? "100%" : thickness }} />
        {inset && <span style={{ position: "absolute", background: "#FAF7F2", padding: "0 8px", fontWeight: 700, fontSize: 11, color }}>{label}</span>}
      </div>
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", background: "#fff", border: "1px solid #24143018", borderRadius: 6, padding: 14 }}>Section B</div>
    </div>
  );
}