Opening Hours

Display of business operating times.

html

<div class="hours">
  <div class="hours__head">
    <h3 class="hours__heading">Opening hours</h3>
    <span class="hours__status" style="--accent:#A8E6C1;">Open now</span>
  </div>
  <dl class="hours__list">
    <div class="hours__row hours__row--today"><dt>Today</dt><dd>9:00 - 18:00</dd></div>
    <div class="hours__row"><dt>Tue</dt><dd>9:00 - 18:00</dd></div>
    <div class="hours__row"><dt>Wed</dt><dd>9:00 - 18:00</dd></div>
    <div class="hours__row"><dt>Sat</dt><dd>10:00 - 14:00</dd></div>
    <div class="hours__row"><dt>Sun</dt><dd>Closed</dd></div>
  </dl>
</div>
<style>
.hours { font: 14px system-ui, sans-serif; color: #241430; max-width: 280px; padding: 18px; border: 1px solid #24143022; border-radius: 14px; background: #FAF7F2; }
.hours__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hours__heading { margin: 0; font-size: 16px; font-weight: 700; }
.hours__status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 9px; border-radius: 999px; background: var(--accent); color: #241430; }
.hours__list { margin: 0; }
.hours__row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #24143012; }
.hours__row dt { font-weight: 600; }
.hours__row dd { margin: 0; color: #241430cc; }
.hours__row--today dt, .hours__row--today dd { color: #241430; font-weight: 700; }
</style>

tailwind

<div class="font-sans text-sm text-[#241430] max-w-[280px] p-4.5 border border-[#24143022] rounded-2xl bg-[#FAF7F2]">
  <div class="flex items-center justify-between mb-3">
    <h3 class="m-0 text-base font-bold">Opening hours</h3>
    <span class="text-[11px] font-bold uppercase tracking-wide px-2.5 py-1 rounded-full text-[#241430]" style="background:#A8E6C1;">Open now</span>
  </div>
  <dl class="m-0">
    <div class="flex justify-between py-1.5 border-b border-[#24143012] text-[#241430] font-bold"><dt>Today</dt><dd class="m-0">9:00 - 18:00</dd></div>
    <div class="flex justify-between py-1.5 border-b border-[#24143012]"><dt class="font-semibold">Tue</dt><dd class="m-0 text-[#241430]/80">9:00 - 18:00</dd></div>
    <div class="flex justify-between py-1.5 border-b border-[#24143012]"><dt class="font-semibold">Wed</dt><dd class="m-0 text-[#241430]/80">9:00 - 18:00</dd></div>
    <div class="flex justify-between py-1.5 border-b border-[#24143012]"><dt class="font-semibold">Sat</dt><dd class="m-0 text-[#241430]/80">10:00 - 14:00</dd></div>
    <div class="flex justify-between py-1.5"><dt class="font-semibold">Sun</dt><dd class="m-0 text-[#241430]/80">Closed</dd></div>
  </dl>
</div>

react

export function OpeningHours({
  heading = "Opening hours",
  todayHours = "9:00 - 18:00",
  openNow = true,
  accent = "#A8E6C1",
}) {
  const rows = [
    ["Tue", "9:00 - 18:00"],
    ["Wed", "9:00 - 18:00"],
    ["Sat", "10:00 - 14:00"],
    ["Sun", "Closed"],
  ];
  return (
    <div style={{ font: "14px system-ui, sans-serif", color: "#241430", maxWidth: 280, padding: 18,
      border: "1px solid #24143022", borderRadius: 14, background: "#FAF7F2" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
        <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700 }}>{heading}</h3>
        <span style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em",
          padding: "4px 9px", borderRadius: 999, background: accent, color: "#241430" }}>{openNow ? "Open now" : "Closed now"}</span>
      </div>
      <dl style={{ margin: 0 }}>
        <div style={{ display: "flex", justifyContent: "space-between", padding: "5px 0", borderBottom: "1px solid #24143012", fontWeight: 700 }}>
          <dt>Today</dt><dd style={{ margin: 0 }}>{todayHours}</dd>
        </div>
        {rows.map(([day, time]) => (
          <div key={day} style={{ display: "flex", justifyContent: "space-between", padding: "5px 0", borderBottom: "1px solid #24143012" }}>
            <dt style={{ fontWeight: 600 }}>{day}</dt><dd style={{ margin: 0, color: "#241430cc" }}>{time}</dd>
          </div>
        ))}
      </dl>
    </div>
  );
}