Container Query

Styling based on container size.

html

<div class="rsp-cq-viewport">
  <div class="rsp-cq-ruler" style="width:260px;">260px</div>
  <div class="rsp-cq-container" style="width:260px;">
    <div class="rsp-cq-card">
      <span class="rsp-cq-thumb" style="background:#BFD9F2;"></span>
      <div class="rsp-cq-text">
        <strong>Weekly summary</strong>
        <p>Layout is driven by the CARD's own width, not the viewport.</p>
      </div>
    </div>
  </div>
</div>
<style>
.rsp-cq-viewport { width: 100%; max-width: 660px; }
.rsp-cq-ruler { font: 11px system-ui, sans-serif; color: #241430aa; border-bottom: 1px dashed #24143044; padding-bottom: 4px; margin-bottom: 8px; text-align: right; }
.rsp-cq-container { container-type: inline-size; container-name: cq-demo; max-width: 100%; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; padding: 14px; box-sizing: border-box; }
.rsp-cq-card { display: flex; flex-direction: column; gap: 10px; font: 13px system-ui, sans-serif; color: #241430; }
.rsp-cq-thumb { width: 100%; height: 60px; border-radius: 8px; }
.rsp-cq-text p { margin: 4px 0 0; color: #241430aa; font-size: 12px; }
@container cq-demo (min-width: 340px) {
  .rsp-cq-card { flex-direction: row; align-items: center; }
  .rsp-cq-thumb { width: 72px; height: 72px; flex: none; }
}
</style>

tailwind

<div class="w-full max-w-[660px]">
  <div class="text-[11px] text-[#241430]/70 border-b border-dashed border-[#24143044] pb-1 mb-2 text-right" style="width:260px;">260px</div>
  <div class="tw-cq-container max-w-full bg-[#FAF7F2] border border-[#24143022] rounded-xl p-3.5 box-border" style="width:260px; container-type:inline-size; container-name:cq-tw-demo;">
    <div class="tw-cq-card flex flex-col gap-2.5 font-sans text-sm text-[#241430]">
      <span class="w-full h-[60px] rounded-lg" style="background:#BFD9F2;"></span>
      <div>
        <strong>Weekly summary</strong>
        <p class="mt-1 text-xs text-[#241430]/70">Layout is driven by the CARD's own width, not the viewport.</p>
      </div>
    </div>
  </div>
</div>
<style>
@container cq-tw-demo (min-width: 340px) {
  .tw-cq-card { flex-direction: row; align-items: center; }
  .tw-cq-card > span { width: 72px; height: 72px; flex: none; }
}
</style>

react

export function ContainerQuery({
  width = 260,
  cardTitle = "Weekly summary",
  showRuler = true,
  accent = "#BFD9F2",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 660 }}>
      {showRuler && <div style={{ width, fontSize: 11, color: "#241430aa", borderBottom: "1px dashed #24143044", paddingBottom: 4, marginBottom: 8, textAlign: "right" }}>{width}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="card" style={{ display: "flex", flexDirection: "column", gap: 10, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430" }}>
          <span className="thumb" style={{ width: "100%", height: 60, borderRadius: 8, background: accent }} />
          <div>
            <strong>{cardTitle}</strong>
            <p style={{ margin: "4px 0 0", color: "#241430aa", fontSize: 12 }}>Layout is driven by the CARD's own width, not the viewport.</p>
          </div>
        </div>
      </div>
      <style>{`
        @container (min-width: 340px) {
          .card { flex-direction: row; align-items: center; }
          .thumb { width: 72px; height: 72px; flex: none; }
        }
      `}</style>
    </div>
  );
}