Mobile Card

Card representation of desktop records.

html

<div class="rsp-mc-viewport">
  <div class="rsp-mc-container" style="width:280px;">
    <div class="rsp-mc-record">
      <span class="rsp-mc-cell rsp-mc-cell--label">Invoice #4021</span>
      <span class="rsp-mc-cell rsp-mc-cell--status" style="color:#E8A020;">Paid</span>
      <span class="rsp-mc-cell rsp-mc-cell--amount">£212.00</span>
    </div>
  </div>
  <p class="rsp-mc-caption">280px &mdash; a table row becomes a card once the container narrows</p>
</div>
<style>
.rsp-mc-viewport { width: 100%; max-width: 660px; }
.rsp-mc-container { container-type: inline-size; max-width: 100%; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; padding: 4px; box-sizing: border-box; }
.rsp-mc-record { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: #fff; border-radius: 8px; font: 13px system-ui, sans-serif; color: #241430; }
.rsp-mc-cell--label::before { content: "Invoice "; font-weight: 700; }
.rsp-mc-cell--status::before { content: "Status: "; color: #241430; }
.rsp-mc-cell--amount::before { content: "Amount: "; color: #241430; }
@container (min-width: 380px) {
  .rsp-mc-record { flex-direction: row; align-items: center; justify-content: space-between; }
  .rsp-mc-cell--label::before, .rsp-mc-cell--status::before, .rsp-mc-cell--amount::before { content: none; }
}
.rsp-mc-caption { margin: 8px 0 0; font: 11px system-ui, sans-serif; color: #241430aa; }
</style>

tailwind

<div class="w-full max-w-[660px]">
  <div class="tw-mc-container max-w-full bg-[#FAF7F2] border border-[#24143022] rounded-xl p-1 box-border" style="width:280px; container-type:inline-size;">
    <div class="tw-mc-record flex flex-col gap-1 p-3 bg-white rounded-lg font-sans text-sm text-[#241430]">
      <span class="tw-mc-label">Invoice #4021</span>
      <span class="tw-mc-status" style="color:#E8A020;">Paid</span>
      <span class="tw-mc-amount">£212.00</span>
    </div>
  </div>
  <p class="mt-2 text-[11px] text-[#241430]/70">280px &mdash; a table row becomes a card once the container narrows</p>
</div>
<style>
.tw-mc-label::before { content: "Invoice "; font-weight: 700; }
.tw-mc-status::before { content: "Status: "; }
.tw-mc-amount::before { content: "Amount: "; }
@container (min-width: 380px) {
  .tw-mc-record { flex-direction: row; align-items: center; justify-content: space-between; }
  .tw-mc-label::before, .tw-mc-status::before, .tw-mc-amount::before { content: none; }
}
</style>

react

export function MobileCard({
  width = 280,
  rowLabel = "Invoice #4021",
  amount = "£212.00",
  accent = "#E8A020",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 660 }}>
      <div style={{ width, maxWidth: "100%", containerType: "inline-size", background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, padding: 4, boxSizing: "border-box" }}>
        <div className="record" style={{ display: "flex", flexDirection: "column", gap: 4, padding: 12, background: "#fff", borderRadius: 8, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430" }}>
          <span className="label">{rowLabel}</span>
          <span className="status" style={{ color: accent }}>Paid</span>
          <span className="amount">{amount}</span>
        </div>
      </div>
      <p style={{ margin: "8px 0 0", fontSize: 11, color: "#241430aa" }}>{width}px &mdash; a table row becomes a card once the container narrows</p>
      <style>{`
        .label::before { content: "Invoice "; font-weight: 700; }
        .status::before { content: "Status: "; }
        .amount::before { content: "Amount: "; }
        @container (min-width: 380px) {
          .record { flex-direction: row; align-items: center; justify-content: space-between; }
          .label::before, .status::before, .amount::before { content: none; }
        }
      `}</style>
    </div>
  );
}