Date Range

Start/end date interval.

html

<div class="drange" data-format="Full">
  <p class="drange__label">Trip dates</p>
  <p class="drange__value">
    <time datetime="2026-09-02">2026-09-02</time>
    <span class="drange__arrow" style="color:#BFD9F2;">&rarr;</span>
    <time datetime="2026-09-09">2026-09-09</time>
  </p>
</div>
<style>
.drange { font: 15px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 320px; padding: 16px 18px; border-radius: 12px; border: 1.5px solid #24143020; box-sizing: border-box; }
.drange__label { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #24143099; font-weight: 700; }
.drange__value { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.drange__arrow { margin: 0 6px; font-weight: 700; }
.drange[data-format="Compact"] { padding: 10px 14px; }
.drange[data-format="Compact"] .drange__value { font-size: 14px; }
</style>

tailwind

<div class="w-[320px] p-[16px_18px] rounded-xl border-[1.5px] border-[#24143020] box-border font-sans text-[15px] text-[#241430] bg-[#FAF7F2] drange-tw" data-format="Full">
  <p class="m-0 mb-1.5 text-xs uppercase tracking-wide text-[#241430]/60 font-bold">Trip dates</p>
  <p class="m-0 font-semibold tabular-nums">
    <time datetime="2026-09-02">2026-09-02</time>
    <span class="mx-1.5 font-bold" style="color:#BFD9F2">&rarr;</span>
    <time datetime="2026-09-09">2026-09-09</time>
  </p>
</div>
<style>
.drange-tw[data-format="Compact"] { padding: 10px 14px; }
.drange-tw[data-format="Compact"] p:last-child { font-size: 14px; }
</style>

react

export function DateRange({
  label = "Trip dates",
  start = "2026-09-02",
  end = "2026-09-09",
  format = "Full",
  accent = "#BFD9F2",
}) {
  const compact = format === "Compact";
  return (
    <div style={{ font: "15px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 320, padding: compact ? "10px 14px" : "16px 18px", borderRadius: 12, border: "1.5px solid #24143020", boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 6px", fontSize: 12, textTransform: "uppercase", letterSpacing: ".05em", color: "#24143099", fontWeight: 700 }}>{label}</p>
      <p style={{ margin: 0, fontWeight: 600, fontVariantNumeric: "tabular-nums", fontSize: compact ? 14 : 16 }}>
        <time dateTime={start}>{start}</time>
        <span style={{ margin: "0 6px", fontWeight: 700, color: accent }}>&rarr;</span>
        <time dateTime={end}>{end}</time>
      </p>
    </div>
  );
}