Time Slot

Available time interval.

html

<button type="button" class="tslot" style="--accent:#A8E6C1;"  aria-pressed="false">
  <time datetime="2026-08-18T10:30 am">10:30 am</time>
  <span class="tslot__dur">30 min</span>
</button>
<style>
.tslot { font: 13px/1.3 system-ui, sans-serif; width: 140px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid #24143030; background: #FAF7F2; color: #241430; cursor: pointer; text-align: left; box-sizing: border-box; }
.tslot__dur { display: block; font-size: 11px; color: #24143099; margin-top: 2px; }
.tslot:hover:not(.tslot--unavailable) { border-color: var(--accent); }
.tslot--selected { background: var(--accent); border-color: var(--accent); font-weight: 700; }
.tslot--unavailable { background: #24143008; color: #24143055; text-decoration: line-through; cursor: not-allowed; }
.tslot:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<button type="button" class="tslot-tw text-left w-[140px] p-[10px_12px] rounded-[10px] border-[1.5px] border-[#24143030] bg-[#FAF7F2] text-[#241430] cursor-pointer box-border font-sans text-[13px] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#241430]" style="--accent:#A8E6C1"  aria-pressed="false">
  <time datetime="2026-08-18T10:30 am">10:30 am</time>
  <span class="block text-[11px] text-[#241430]/60 mt-0.5">30 min</span>
</button>
<style>
.tslot-tw--selected { background: var(--accent); border-color: var(--accent); font-weight: 700; }
.tslot-tw--unavailable { background: #24143008; color: #24143055; text-decoration: line-through; cursor: not-allowed; }
.tslot-tw:hover:not(.tslot-tw--unavailable) { border-color: var(--accent); }
</style>

react

export function TimeSlot({
  time = "10:30 am",
  date = "2026-08-18",
  duration = "30 min",
  selected = false,
  available = true,
  accent = "#A8E6C1",
}) {
  const base = { font: "13px/1.3 system-ui, sans-serif", width: 140, padding: "10px 12px", borderRadius: 10, border: "1.5px solid #24143030", background: "#FAF7F2", color: "#241430", cursor: "pointer", textAlign: "left", boxSizing: "border-box" };
  const extra = !available
    ? { background: "#24143008", color: "#24143055", textDecoration: "line-through", cursor: "not-allowed" }
    : selected
    ? { background: accent, borderColor: accent, fontWeight: 700 }
    : {};
  return (
    <button type="button" disabled={!available} aria-pressed={selected} style={{ ...base, ...extra }}>
      <time dateTime={`${date}T${time}`}>{time}</time>
      <span style={{ display: "block", fontSize: 11, color: "#24143099", marginTop: 2 }}>{duration}</span>
    </button>
  );
}