Desktop-first

Designing from large screens downward.

html

<div class="rsp-df-stage">
  <p class="rsp-df-label">Dashboard widgets</p>
  <div class="rsp-df-grid" style="grid-template-columns:repeat(3, 1fr);">
    <span style="background:#241430;"></span><span style="background:#241430;"></span><span style="background:#241430;"></span>
  </div>
  <p class="rsp-df-code">base: grid-template-columns: repeat(3, 1fr);</p>
</div>
<style>
.rsp-df-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 12px system-ui, sans-serif; color: #241430; }
.rsp-df-label { margin: 0 0 8px; font-weight: 600; }
.rsp-df-grid { display: grid; gap: 8px; }
.rsp-df-grid span { height: 40px; border-radius: 8px; }
.rsp-df-grid--override { grid-template-columns: 1fr !important; }
.rsp-df-code { margin: 10px 0 0; font-family: ui-monospace, monospace; font-size: 10px; color: #241430aa; }
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-xs text-[#241430]">
  <p class="m-0 mb-2 font-semibold">Dashboard widgets</p>
  <div class="tw-df-grid grid gap-2" style="grid-template-columns:repeat(3, 1fr);">
    <span class="h-10 rounded-lg" style="background:#241430;"></span><span class="h-10 rounded-lg" style="background:#241430;"></span><span class="h-10 rounded-lg" style="background:#241430;"></span>
  </div>
  <p class="mt-2.5 font-mono text-[10px] text-[#241430]/70">base: grid-template-columns: repeat(3, 1fr);</p>
</div>
<style>
.tw-df-override { grid-template-columns: 1fr !important; }
</style>

react

export function DesktopFirst({
  mobileOverride = false,
  columns = 3,
  label = "Dashboard widgets",
  accent = "#241430",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430" }}>
      <p style={{ margin: "0 0 8px", fontWeight: 600 }}>{label}</p>
      <div style={{ display: "grid", gap: 8, gridTemplateColumns: mobileOverride ? "1fr" : `repeat(${columns}, 1fr)` }}>
        <span style={{ height: 40, borderRadius: 8, background: accent }} />
        <span style={{ height: 40, borderRadius: 8, background: accent }} />
        <span style={{ height: 40, borderRadius: 8, background: accent }} />
      </div>
      <p style={{ margin: "10px 0 0", fontFamily: "ui-monospace, monospace", fontSize: 10, color: "#241430aa" }}>
        {mobileOverride ? "@media (max-width: 480px) override applied: 1 column" : `base: grid-template-columns: repeat(${columns}, 1fr);`}
      </p>
    </div>
  );
}