Availability Block

Period of availability.

html

<div class="avail" data-pattern="Solid" style="--accent:#A8E6C1;">
  <p class="avail__label">Open for meetings</p>
  <p class="avail__range">
    <time datetime="2026-08-18T09:00">09:00</time>&ndash;<time datetime="2026-08-18T12:00">12:00</time>
  </p>
</div>
<style>
.avail { font: 14px/1.4 system-ui, sans-serif; color: #14351f; width: 300px; padding: 16px 18px; border-radius: 10px; box-sizing: border-box; background: var(--accent); border: 1.5px solid #24143020; }
.avail[data-pattern="Striped"] { background-image: repeating-linear-gradient(135deg, var(--accent), var(--accent) 8px, #FAF7F2 8px, #FAF7F2 14px); }
.avail__label { margin: 0 0 6px; font-weight: 700; }
.avail__range { margin: 0; font-variant-numeric: tabular-nums; }
</style>

tailwind

<div class="w-[300px] p-4 rounded-[10px] box-border font-sans text-sm text-[#14351f] border-[1.5px] border-[#24143020]" data-pattern="Solid" style="background:#A8E6C1">
  <p class="m-0 mb-1.5 font-bold">Open for meetings</p>
  <p class="m-0 tabular-nums">
    <time datetime="2026-08-18T09:00">09:00</time>&ndash;<time datetime="2026-08-18T12:00">12:00</time>
  </p>
</div>
<style>
div[data-pattern="Striped"] { background-image: repeating-linear-gradient(135deg, #A8E6C1, #A8E6C1 8px, #FAF7F2 8px, #FAF7F2 14px); }
</style>

react

export function AvailabilityBlock({
  label = "Open for meetings",
  start = "09:00",
  end = "12:00",
  date = "2026-08-18",
  pattern = "Solid",
  accent = "#A8E6C1",
}) {
  const bg = pattern === "Striped"
    ? `repeating-linear-gradient(135deg, ${accent}, ${accent} 8px, #FAF7F2 8px, #FAF7F2 14px)`
    : accent;
  return (
    <div style={{ font: "14px/1.4 system-ui, sans-serif", color: "#14351f", width: 300, padding: "16px 18px", borderRadius: 10, boxSizing: "border-box", background: bg, border: "1.5px solid #24143020" }}>
      <p style={{ margin: "0 0 6px", fontWeight: 700 }}>{label}</p>
      <p style={{ margin: 0, fontVariantNumeric: "tabular-nums" }}>
        <time dateTime={`${date}T${start}`}>{start}</time>&ndash;<time dateTime={`${date}T${end}`}>{end}</time>
      </p>
    </div>
  );
}