Busy Block

Period when a resource is unavailable.

html

<div class="busy" style="--accent:#241430;">
  <p class="busy__label">Out of office <span class="busy__reason" data-reason="Meeting">Meeting</span></p>
  <p class="busy__range">
    <time datetime="2026-08-18T13:00">13:00</time>&ndash;<time datetime="2026-08-18T14:30">14:30</time>
  </p>
</div>
<style>
.busy { font: 14px/1.4 system-ui, sans-serif; color: #FAF7F2; width: 300px; padding: 16px 18px; border-radius: 10px; box-sizing: border-box; background: var(--accent); background-image: repeating-linear-gradient(135deg, rgba(250,247,242,.08) 0 6px, transparent 6px 12px); }
.busy__label { margin: 0 0 6px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.busy__reason { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: rgba(250,247,242,.18); padding: 2px 8px; border-radius: 999px; }
.busy__range { margin: 0; font-variant-numeric: tabular-nums; opacity: .85; }
</style>

tailwind

<div class="w-[300px] p-4 rounded-[10px] box-border font-sans text-sm text-[#FAF7F2]" style="background:#241430;background-image:repeating-linear-gradient(135deg, rgba(250,247,242,.08) 0 6px, transparent 6px 12px)">
  <p class="m-0 mb-1.5 font-bold flex items-center gap-2 flex-wrap">Out of office <span class="text-[11px] font-bold uppercase tracking-wide bg-[rgba(250,247,242,.18)] px-2 py-0.5 rounded-full" data-reason="Meeting">Meeting</span></p>
  <p class="m-0 tabular-nums opacity-85">
    <time datetime="2026-08-18T13:00">13:00</time>&ndash;<time datetime="2026-08-18T14:30">14:30</time>
  </p>
</div>

react

export function BusyBlock({
  label = "Out of office",
  start = "13:00",
  end = "14:30",
  date = "2026-08-18",
  reason = "Meeting",
  accent = "#241430",
}) {
  return (
    <div style={{ font: "14px/1.4 system-ui, sans-serif", color: "#FAF7F2", width: 300, padding: "16px 18px", borderRadius: 10, boxSizing: "border-box", background: accent, backgroundImage: "repeating-linear-gradient(135deg, rgba(250,247,242,.08) 0 6px, transparent 6px 12px)" }}>
      <p style={{ margin: "0 0 6px", fontWeight: 700, display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
        {label} <span style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".04em", background: "rgba(250,247,242,.18)", padding: "2px 8px", borderRadius: 999 }}>{reason}</span>
      </p>
      <p style={{ margin: 0, fontVariantNumeric: "tabular-nums", opacity: .85 }}>
        <time dateTime={`${date}T${start}`}>{start}</time>&ndash;<time dateTime={`${date}T${end}`}>{end}</time>
      </p>
    </div>
  );
}