Booking Widget

Embedded appointment or reservation interface.

html

<div class="booking">
  <div class="booking__head">
    <h3 class="booking__service">60-minute consultation</h3>
    <span class="booking__date">Tue, 20 Aug</span>
  </div>
  <span class="booking__period-label">Morning</span>
  <div class="booking__slots booking__slots--Morning">
    <button type="button" class="booking__slot" style="--accent:#241430;">9:00</button>
    <button type="button" class="booking__slot booking__slot--active" style="--accent:#241430;">10:30</button>
    <button type="button" class="booking__slot" style="--accent:#241430;">12:00</button>
  </div>
  <p class="booking__price">From <strong>$45</strong> per session</p>
</div>
<style>
.booking { font: 16px system-ui, sans-serif; color: #241430; max-width: 300px; border: 1px solid #24143022; border-radius: 14px; padding: 18px; background: #FAF7F2; }
.booking__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.booking__service { margin: 0; font-size: 17px; font-weight: 700; }
.booking__date { font-size: 13px; color: #241430aa; }
.booking__period-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #24143088; margin-bottom: 8px; }
.booking__slots { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.booking__slots--Evening { opacity: .92; }
.booking__slot { border: 1.5px solid var(--accent); background: transparent; color: var(--accent); padding: 6px 12px; border-radius: 8px; font: 600 13px system-ui, sans-serif; cursor: pointer; }
.booking__slot:hover, .booking__slot:focus-visible { background: var(--accent); color: #FAF7F2; }
.booking__slot--active { background: var(--accent); color: #FAF7F2; }
.booking__price { margin: 0; font-size: 13px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] max-w-[300px] border border-[#24143022] rounded-2xl p-4.5 bg-[#FAF7F2]">
  <div class="flex justify-between items-baseline mb-3">
    <h3 class="m-0 text-[17px] font-bold">60-minute consultation</h3>
    <span class="text-[13px] text-[#241430]/65">Tue, 20 Aug</span>
  </div>
  <span class="block text-[11px] font-bold uppercase tracking-wide text-[#241430]/55 mb-2">Morning</span>
  <div class="booking-tw__slots booking-tw__slots--Morning flex gap-2 flex-wrap mb-3">
    <button type="button" class="border-[1.5px] bg-transparent px-3 py-1.5 rounded-lg text-[13px] font-semibold hover:text-[#FAF7F2]" style="border-color:#241430;color:#241430;">9:00</button>
    <button type="button" class="border-[1.5px] px-3 py-1.5 rounded-lg text-[13px] font-semibold text-[#FAF7F2]" style="border-color:#241430;background:#241430;">10:30</button>
    <button type="button" class="border-[1.5px] bg-transparent px-3 py-1.5 rounded-lg text-[13px] font-semibold hover:text-[#FAF7F2]" style="border-color:#241430;color:#241430;">12:00</button>
  </div>
  <p class="m-0 text-[13px] text-[#241430]/80">From <strong>$45</strong> per session</p>
</div>
<style>
.booking-tw__slots--Evening { opacity: .92; }
.booking-tw__slots button:hover { background: currentColor; }
</style>

react

export function BookingWidget({
  serviceName = "60-minute consultation",
  selectedDate = "Tue, 20 Aug",
  period = "Morning",
  accent = "#241430",
  showPrice = true,
}) {
  const slots = ["9:00", "10:30", "12:00"];
  return (
    <div style={{ font: "16px system-ui, sans-serif", color: "#241430", maxWidth: 300, border: "1px solid #24143022",
      borderRadius: 14, padding: 18, background: "#FAF7F2" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
        <h3 style={{ margin: 0, fontSize: 17, fontWeight: 700 }}>{serviceName}</h3>
        <span style={{ fontSize: 13, color: "#241430aa" }}>{selectedDate}</span>
      </div>
      <span style={{ display: "block", fontSize: 11, fontWeight: 700, textTransform: "uppercase",
        letterSpacing: "0.05em", color: "#24143088", marginBottom: 8 }}>{period}</span>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 12, opacity: period === "Evening" ? 0.92 : 1 }}>
        {slots.map((slot, i) => (
          <button key={slot} type="button" style={{ border: `1.5px solid ${accent}`,
            background: i === 1 ? accent : "transparent", color: i === 1 ? "#FAF7F2" : accent,
            padding: "6px 12px", borderRadius: 8, font: "600 13px system-ui, sans-serif", cursor: "pointer" }}>
            {slot}
          </button>
        ))}
      </div>
      {showPrice && <p style={{ margin: 0, fontSize: 13, color: "#241430cc" }}>From <strong>$45</strong> per session</p>}
    </div>
  );
}