Event

Scheduled item.

html

<article class="ev" data-category="Work" style="--accent:#A8E6C1;">
  <span class="ev__stripe"></span>
  <div class="ev__body">
    <p class="ev__title">Product sync</p>
    <p class="ev__meta"><time datetime="2026-08-18T1:00 pm">1:00 pm</time> &middot; <span class="ev__category">Work</span></p>
  </div>
</article>
<style>
.ev { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 340px; padding: 12px 14px; border-radius: 10px; box-sizing: border-box; display: flex; gap: 10px; box-shadow: 0 4px 12px rgba(36,20,48,.08); }
.ev__stripe { width: 4px; border-radius: 2px; background: var(--accent); flex: none; }
.ev__title { margin: 0; font-weight: 700; }
.ev__meta { margin: 4px 0 0; font-size: 12px; color: #24143099; }
.ev__category { text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.ev[data-category="Holiday"] .ev__category { color: #b5750f; }
.ev[data-category="Personal"] .ev__category { color: #a1447e; }
</style>

tailwind

<article class="flex gap-2.5 w-[340px] p-3 rounded-[10px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] shadow-[0_4px_12px_rgba(36,20,48,.08)] ev-tw" data-category="Work">
  <span class="w-1 rounded-sm flex-none" style="background:#A8E6C1"></span>
  <div>
    <p class="m-0 font-bold">Product sync</p>
    <p class="mt-1 mb-0 text-xs text-[#241430]/60"><time datetime="2026-08-18T1:00 pm">1:00 pm</time> &middot; <span class="ev-tw-cat uppercase tracking-wide font-bold">Work</span></p>
  </div>
</article>
<style>
.ev-tw[data-category="Holiday"] .ev-tw-cat { color: #b5750f; }
.ev-tw[data-category="Personal"] .ev-tw-cat { color: #a1447e; }
</style>

react

export function Event({
  title = "Product sync",
  date = "2026-08-18",
  time = "1:00 pm",
  category = "Work",
  accent = "#A8E6C1",
}) {
  const catColor = { Work: "#241430", Personal: "#a1447e", Holiday: "#b5750f" }[category] ?? "#241430";
  return (
    <article style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 340, padding: "12px 14px", borderRadius: 10, boxSizing: "border-box", display: "flex", gap: 10, boxShadow: "0 4px 12px rgba(36,20,48,.08)" }}>
      <span style={{ width: 4, borderRadius: 2, background: accent, flex: "none" }} />
      <div>
        <p style={{ margin: 0, fontWeight: 700 }}>{title}</p>
        <p style={{ margin: "4px 0 0", fontSize: 12, color: "#24143099" }}>
          <time dateTime={`${date}T${time}`}>{time}</time> &middot; <span style={{ textTransform: "uppercase", letterSpacing: ".04em", fontWeight: 700, color: catColor }}>{category}</span>
        </p>
      </div>
    </article>
  );
}