Widget

Self-contained information/function block.

html

<div class="widget widget--elevated" style="--accent:#F5C2E0;border-radius:12px;">
  <div class="widget__header">
    <h4 class="widget__title">Server status</h4>
    <button class="widget__action" type="button" aria-label="Refresh">⟳</button>
  </div>
  <div class="widget__body">
    <p>All systems operational. Last checked 2 minutes ago.</p>
  </div>
</div>
<style>
.widget { font: 15px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; box-sizing: border-box; max-width: 300px; overflow: hidden; }
.widget--minimal { border: 1.5px solid #24143025; }
.widget--elevated { box-shadow: 0 12px 28px rgba(36,20,48,.14); }
.widget__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid #24143015; }
.widget--minimal .widget__header { border-bottom: none; }
.widget__title { margin: 0; font-size: 14px; font-weight: 700; }
.widget__action { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; font-size: 14px; line-height: 1; }
.widget__action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.widget__body { padding: 14px 16px; }
.widget__body p { margin: 0; font-size: 13.5px; color: #241430b3; }
</style>

tailwind

<div class="widget-tw widget-tw--elevated font-sans text-[#241430] bg-[#FAF7F2] box-border max-w-[300px] overflow-hidden" style="--accent:#F5C2E0;border-radius:12px;">
  <div class="widget-tw__header flex items-center justify-between gap-2 px-4 py-3.5 border-b border-[#24143015]">
    <h4 class="m-0 text-sm font-bold">Server status</h4>
    <button type="button" aria-label="Refresh" class="w-[26px] h-[26px] rounded-full border-[1.5px] bg-transparent text-sm leading-none" style="border-color:#F5C2E0;color:#F5C2E0">⟳</button>
  </div>
  <div class="px-4 py-3.5">
    <p class="m-0 text-[13.5px] text-[#241430]/70">All systems operational. Last checked 2 minutes ago.</p>
  </div>
</div>
<style>
.widget-tw--minimal { border: 1.5px solid #24143025; }
.widget-tw--minimal .widget-tw__header { border-bottom: none; }
.widget-tw--elevated { box-shadow: 0 12px 28px rgba(36,20,48,.14); }
</style>

react

export function Widget({
  title = "Server status",
  body = "All systems operational. Last checked 2 minutes ago.",
  variant = "elevated",
  accent = "#F5C2E0",
  showAction = true,
  radius = 12,
}) {
  const minimal = variant === "minimal";
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 15, lineHeight: 1.5, color: "#241430",
      background: "#FAF7F2", boxSizing: "border-box", maxWidth: 300, overflow: "hidden", borderRadius: radius,
      border: minimal ? "1.5px solid #24143025" : "none",
      boxShadow: minimal ? "none" : "0 12px 28px rgba(36,20,48,.14)" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8,
        padding: "14px 16px", borderBottom: minimal ? "none" : "1px solid #24143015" }}>
        <h4 style={{ margin: 0, fontSize: 14, fontWeight: 700 }}>{title}</h4>
        {showAction && (
          <button type="button" aria-label="Refresh" style={{ width: 26, height: 26, borderRadius: "50%",
            border: `1.5px solid ${accent}`, background: "transparent", color: accent, cursor: "pointer",
            fontSize: 14, lineHeight: 1 }}>⟳</button>
        )}
      </div>
      <div style={{ padding: "14px 16px" }}>
        <p style={{ margin: 0, fontSize: 13.5, color: "#241430b3" }}>{body}</p>
      </div>
    </div>
  );
}