Dashboard

Collection of information widgets.

html

<section class="dash-demo">
  <h3 class="dash-demo__title">Traffic</h3>
  <div class="dash-demo__grid" style="grid-template-columns:repeat(3, 1fr);gap:10px;">
    <div class="dash-demo__widget"><span class="dash-demo__label">Visitors</span><strong>12.4k</strong><span class="dash-demo__trend" style="background:#E8A020;"></span></div>
    <div class="dash-demo__widget"><span class="dash-demo__label">Signups</span><strong>842</strong><span class="dash-demo__trend" style="background:#E8A020;"></span></div>
    <div class="dash-demo__widget"><span class="dash-demo__label">Revenue</span><strong>$9.1k</strong><span class="dash-demo__trend" style="background:#E8A020;"></span></div>
    <div class="dash-demo__widget"><span class="dash-demo__label">Bounce</span><strong>31%</strong><span class="dash-demo__trend" style="background:#E8A020;"></span></div>
  </div>
</section>
<style>
.dash-demo { font: 13px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; }
.dash-demo__title { margin: 0 0 10px; font-size: 15px; }
.dash-demo__grid { display: grid; }
.dash-demo__widget { position: relative; overflow: hidden; background: #fff; border: 1px solid #24143018; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.dash-demo__label { font-size: 11px; text-transform: uppercase; color: #24143099; letter-spacing: .03em; }
.dash-demo__widget strong { font-size: 18px; }
.dash-demo__trend { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
</style>

tailwind

<section class="font-sans text-[13px] text-[#241430] bg-[#FAF7F2] p-4">
  <h3 class="m-0 mb-2.5 text-[15px]">Traffic</h3>
  <div class="grid" style="grid-template-columns:repeat(3, 1fr);gap:10px;">
    <div class="relative overflow-hidden bg-white border border-[#24143018] rounded-lg px-3 py-2.5 flex flex-col gap-1"><span class="text-[11px] uppercase text-[#24143099] tracking-wide">Visitors</span><strong class="text-lg">12.4k</strong><span class="absolute left-0 right-0 bottom-0 h-[3px]" style="background:#E8A020;"></span></div>
    <div class="relative overflow-hidden bg-white border border-[#24143018] rounded-lg px-3 py-2.5 flex flex-col gap-1"><span class="text-[11px] uppercase text-[#24143099] tracking-wide">Signups</span><strong class="text-lg">842</strong><span class="absolute left-0 right-0 bottom-0 h-[3px]" style="background:#E8A020;"></span></div>
    <div class="relative overflow-hidden bg-white border border-[#24143018] rounded-lg px-3 py-2.5 flex flex-col gap-1"><span class="text-[11px] uppercase text-[#24143099] tracking-wide">Revenue</span><strong class="text-lg">$9.1k</strong><span class="absolute left-0 right-0 bottom-0 h-[3px]" style="background:#E8A020;"></span></div>
    <div class="relative overflow-hidden bg-white border border-[#24143018] rounded-lg px-3 py-2.5 flex flex-col gap-1"><span class="text-[11px] uppercase text-[#24143099] tracking-wide">Bounce</span><strong class="text-lg">31%</strong><span class="absolute left-0 right-0 bottom-0 h-[3px]" style="background:#E8A020;"></span></div>
  </div>
</section>

react

export function Dashboard({
  title = "Traffic",
  columns = 3,
  gap = 10,
  accent = "#E8A020",
  trend = true,
}) {
  const widgets = [
    { label: "Visitors", value: "12.4k" },
    { label: "Signups", value: "842" },
    { label: "Revenue", value: "$9.1k" },
    { label: "Bounce", value: "31%" },
  ];
  return (
    <section style={{ fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430", background: "#FAF7F2", padding: 16 }}>
      <h3 style={{ margin: "0 0 10px", fontSize: 15 }}>{title}</h3>
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap }}>
        {widgets.map((w) => (
          <div key={w.label} style={{ position: "relative", overflow: "hidden", background: "#fff", border: "1px solid #24143018", borderRadius: 8, padding: "10px 12px", display: "flex", flexDirection: "column", gap: 4 }}>
            <span style={{ fontSize: 11, textTransform: "uppercase", color: "#24143099", letterSpacing: ".03em" }}>{w.label}</span>
            <strong style={{ fontSize: 18 }}>{w.value}</strong>
            {trend && <span style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 3, background: accent }} />}
          </div>
        ))}
      </div>
    </section>
  );
}