Breakpoint

Width at which layout changes.

html

<div class="rsp-bp-viewport">
  <div class="rsp-bp-ruler">Sidebar layout &mdash; 300px wide, breakpoint at 400px</div>
  <div class="rsp-bp-container" style="width:300px; --bp:400px;">
    <div class="rsp-bp-layout">
      <div class="rsp-bp-block" style="background:#E8A020;">A</div>
      <div class="rsp-bp-block" style="background:#E8A020;">B</div>
    </div>
    <p class="rsp-bp-state"></p>
  </div>
</div>
<style>
.rsp-bp-viewport { width: 100%; max-width: 660px; }
.rsp-bp-ruler { font: 11px system-ui, sans-serif; color: #241430aa; margin-bottom: 8px; }
.rsp-bp-container { container-type: inline-size; max-width: 100%; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; padding: 14px; box-sizing: border-box; }
.rsp-bp-layout { display: flex; flex-direction: column; gap: 8px; }
.rsp-bp-block { padding: 14px; border-radius: 8px; color: #241430; font-weight: 700; text-align: center; }
.rsp-bp-state::before { content: "Stacked (below breakpoint)"; font: 12px system-ui, sans-serif; color: #241430aa; }
@container (min-width: 400px) {
  .rsp-bp-layout { flex-direction: row; }
  .rsp-bp-block { flex: 1; }
  .rsp-bp-state::before { content: "Side by side (breakpoint reached)"; }
}
</style>

tailwind

<div class="w-full max-w-[660px]">
  <div class="text-[11px] text-[#241430]/70 mb-2">Sidebar layout &mdash; 300px wide, breakpoint at 400px</div>
  <div class="tw-bp-container max-w-full bg-[#FAF7F2] border border-[#24143022] rounded-xl p-3.5 box-border" style="width:300px; container-type:inline-size;">
    <div class="tw-bp-layout flex flex-col gap-2">
      <div class="flex-1 p-3.5 rounded-lg text-[#241430] font-bold text-center" style="background:#E8A020;">A</div>
      <div class="flex-1 p-3.5 rounded-lg text-[#241430] font-bold text-center" style="background:#E8A020;">B</div>
    </div>
    <p class="tw-bp-state text-xs text-[#241430]/70 mt-2"></p>
  </div>
</div>
<style>
.tw-bp-state::before { content: "Stacked (below breakpoint)"; }
@container (min-width: 400px) {
  .tw-bp-layout { flex-direction: row; }
  .tw-bp-state::before { content: "Side by side (breakpoint reached)"; }
}
</style>

react

export function Breakpoint({
  width = 300,
  breakpointValue = 400,
  label = "Sidebar layout",
  accent = "#E8A020",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 660 }}>
      <div style={{ fontSize: 11, color: "#241430aa", marginBottom: 8 }}>{label} &mdash; {width}px wide, breakpoint at {breakpointValue}px</div>
      <div style={{ width, maxWidth: "100%", containerType: "inline-size", background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, padding: 14, boxSizing: "border-box" }}>
        <div className="layout" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <div style={{ flex: 1, padding: 14, borderRadius: 8, color: "#241430", fontWeight: 700, textAlign: "center", background: accent }}>A</div>
          <div style={{ flex: 1, padding: 14, borderRadius: 8, color: "#241430", fontWeight: 700, textAlign: "center", background: accent }}>B</div>
        </div>
        <p className="state" style={{ fontSize: 12, color: "#241430aa", marginTop: 8 }} />
      </div>
      <style>{`
        .state::before { content: "Stacked (below breakpoint)"; }
        @container (min-width: ${breakpointValue}px) {
          .layout { flex-direction: row; }
          .state::before { content: "Side by side (breakpoint reached)"; }
        }
      `}</style>
    </div>
  );
}