Fluid Layout

Layout scaling continuously.

html

<div class="rsp-fl-viewport">
  <div class="rsp-fl-container" style="width:320px;">
    <p class="rsp-fl-text" style="font-size:clamp(14px, 8cqw, 28px); color:#241430;">Scales smoothly, no jumps</p>
  </div>
  <p class="rsp-fl-caption">320px container &mdash; font uses clamp(14px, 8cqw, 28px)</p>
</div>
<style>
.rsp-fl-viewport { width: 100%; max-width: 660px; }
.rsp-fl-container { container-type: inline-size; max-width: 100%; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; padding: 18px; box-sizing: border-box; }
.rsp-fl-text { margin: 0; font-weight: 800; font-family: system-ui, sans-serif; line-height: 1.15; }
.rsp-fl-caption { margin: 8px 0 0; font: 11px system-ui, sans-serif; color: #241430aa; }
</style>

tailwind

<div class="w-full max-w-[660px]">
  <div class="max-w-full bg-[#FAF7F2] border border-[#24143022] rounded-xl p-[18px] box-border" style="width:320px; container-type:inline-size;">
    <p class="m-0 font-extrabold font-sans" style="font-size:clamp(14px, 8cqw, 28px); color:#241430; line-height:1.15;">Scales smoothly, no jumps</p>
  </div>
  <p class="mt-2 text-[11px] text-[#241430]/70">320px container &mdash; font uses clamp(14px, 8cqw, 28px)</p>
</div>

react

export function FluidLayout({
  width = 320,
  minSize = 14,
  maxSize = 28,
  accent = "#241430",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 660 }}>
      <div style={{ width, maxWidth: "100%", containerType: "inline-size", background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, padding: 18, boxSizing: "border-box" }}>
        <p style={{ margin: 0, fontWeight: 800, fontFamily: "system-ui, sans-serif", lineHeight: 1.15, fontSize: `clamp(${minSize}px, 8cqw, ${maxSize}px)`, color: accent }}>Scales smoothly, no jumps</p>
      </div>
      <p style={{ margin: "8px 0 0", fontSize: 11, color: "#241430aa" }}>{width}px container &mdash; font uses clamp({minSize}px, 8cqw, {maxSize}px)</p>
    </div>
  );
}