Dashboard Widget

Individual dashboard component.

html

<section class="dwidget dwidget--medium" style="--c:#A8E6C1;" aria-labelledby="dwidget-title">
  <header class="dwidget__head">
    <h3 id="dwidget-title" class="dwidget__title">Active users</h3>
    <div class="dwidget__toolbar"><button type="button" aria-label="Refresh">⟳</button><button type="button" aria-label="More options">⋯</button></div>
  </header>
  <div class="dwidget__body">Widget content area</div>
</section>
<style>
.dwidget { border: 1px solid #24143018; border-left: 4px solid var(--c); border-radius: 10px; background: #FAF7F2; font: 13px system-ui, sans-serif; color: #241430; }
.dwidget--small { padding: 8px; }
.dwidget--medium { padding: 14px; }
.dwidget--large { padding: 22px; }
.dwidget__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dwidget__title { margin: 0; font-size: 14px; }
.dwidget__toolbar { display: flex; gap: 4px; }
.dwidget__toolbar button { border: 1px solid #24143022; background: #FAF7F2; border-radius: 6px; width: 24px; height: 24px; cursor: pointer; }
.dwidget__toolbar button:hover, .dwidget__toolbar button:focus-visible { background: color-mix(in srgb, var(--c) 30%, #FAF7F2); outline: none; }
.dwidget__body { opacity: .7; min-height: 40px; }
</style>

tailwind

<section class="dwidget-tw dwidget-tw--medium border border-[#24143018] border-l-4 rounded-[10px] bg-[#FAF7F2] font-sans text-[13px] text-[#241430]" style="border-left-color:#A8E6C1;--c:#A8E6C1;" aria-labelledby="dwidget-tw-title">
  <header class="flex justify-between items-center mb-2">
    <h3 id="dwidget-tw-title" class="m-0 text-sm">Active users</h3>
    <div class="flex gap-1"><button type="button" class="border border-[#24143022] bg-[#FAF7F2] rounded-md w-6 h-6 cursor-pointer" aria-label="Refresh">⟳</button><button type="button" class="border border-[#24143022] bg-[#FAF7F2] rounded-md w-6 h-6 cursor-pointer" aria-label="More options">⋯</button></div>
  </header>
  <div class="opacity-70 min-h-10">Widget content area</div>
</section>
<style>
.dwidget-tw--small { padding: 8px; }
.dwidget-tw--medium { padding: 14px; }
.dwidget-tw--large { padding: 22px; }
</style>

react

export function DashboardWidget({
  title = "Active users",
  toolbar = true,
  size = "medium",
  color = "#A8E6C1",
}) {
  const pad = { small: 8, medium: 14, large: 22 }[size] ?? 14;
  return (
    <section aria-labelledby="dwidget-react-title" style={{ border: "1px solid #24143018", borderLeft: `4px solid ${color}`, borderRadius: 10, background: "#FAF7F2", font: "13px system-ui, sans-serif", color: "#241430", padding: pad }}>
      <header style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
        <h3 id="dwidget-react-title" style={{ margin: 0, fontSize: 14 }}>{title}</h3>
        {toolbar && (
          <div style={{ display: "flex", gap: 4 }}>
            <button type="button" aria-label="Refresh" style={{ border: "1px solid #24143022", background: "#FAF7F2", borderRadius: 6, width: 24, height: 24, cursor: "pointer" }}>⟳</button>
            <button type="button" aria-label="More options" style={{ border: "1px solid #24143022", background: "#FAF7F2", borderRadius: 6, width: 24, height: 24, cursor: "pointer" }}>⋯</button>
          </div>
        )}
      </header>
      <div style={{ opacity: 0.7, minHeight: 40 }}>Widget content area</div>
    </section>
  );
}