Saved Dashboard

Persisted dashboard configuration.

html

<article class="saveddash" style="--c:#A8E6C1;">
  <div class="saveddash__thumb" aria-hidden="true"><span></span><span></span><span></span></div>
  <div class="saveddash__text">
    <strong>Q3 Growth Review</strong>
    <span class="saveddash__meta">6 widgets · Saved 2 hours ago · Shared</span>
  </div>
</article>
<style>
.saveddash { display: flex; gap: 12px; align-items: center; border: 1px solid #24143018; border-radius: 10px; padding: 12px; font: 13px system-ui, sans-serif; color: #241430; max-width: 320px; }
.saveddash__thumb { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 52px; height: 38px; border-radius: 6px; border: 1px solid #24143018; overflow: hidden; flex: none; }
.saveddash__thumb span { background: var(--c); }
.saveddash__thumb span:nth-child(1) { grid-column: span 2; opacity: .9; }
.saveddash__thumb span:nth-child(2) { opacity: .6; }
.saveddash__thumb span:nth-child(3) { opacity: .4; }
.saveddash__meta { display: block; font-size: 12px; opacity: .7; }
</style>

tailwind

<article class="saveddash-tw flex gap-3 items-center border border-[#24143018] rounded-[10px] p-3 font-sans text-[13px] text-[#241430] max-w-sm" style="--c:#A8E6C1;">
  <div class="grid grid-cols-2 gap-[3px] w-[52px] h-[38px] rounded-md border border-[#24143018] overflow-hidden flex-none" aria-hidden="true">
    <span class="col-span-2 opacity-90" style="background:var(--c);"></span>
    <span class="opacity-60" style="background:var(--c);"></span>
    <span class="opacity-40" style="background:var(--c);"></span>
  </div>
  <div>
    <strong class="block">Q3 Growth Review</strong>
    <span class="block text-xs opacity-70">6 widgets · Saved 2 hours ago · Shared</span>
  </div>
</article>

react

export function SavedDashboard({
  name = "Q3 Growth Review",
  savedAt = "2 hours ago",
  shared = true,
  widgetCount = 6,
  color = "#A8E6C1",
}) {
  return (
    <article style={{ display: "flex", gap: 12, alignItems: "center", border: "1px solid #24143018", borderRadius: 10, padding: 12, font: "13px system-ui, sans-serif", color: "#241430", maxWidth: 320 }}>
      <div aria-hidden="true" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 3, width: 52, height: 38, borderRadius: 6, border: "1px solid #24143018", overflow: "hidden", flex: "none" }}>
        <span style={{ gridColumn: "span 2", background: color, opacity: 0.9 }} />
        <span style={{ background: color, opacity: 0.6 }} />
        <span style={{ background: color, opacity: 0.4 }} />
      </div>
      <div>
        <strong style={{ display: "block" }}>{name}</strong>
        <span style={{ display: "block", fontSize: 12, opacity: 0.7 }}>{widgetCount} widgets · Saved {savedAt}{shared ? " · Shared" : ""}</span>
      </div>
    </article>
  );
}