Appointment

Scheduled meeting/activity.

Dentist checkup

Confirmed

· 10:30 am

html

<article class="appt" style="border-left-color:#A8E6C1;">
  <div class="appt__head">
    <h3 class="appt__title">Dentist checkup</h3>
    <span class="appt__status" data-status="Confirmed">Confirmed</span>
  </div>
  <p class="appt__when"><time datetime="2026-08-20">2026-08-20</time> &middot; 10:30 am</p>
</article>
<style>
.appt { font: 15px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 360px; padding: 18px 20px; border-radius: 12px; border-left: 4px solid; box-sizing: border-box; box-shadow: 0 6px 18px rgba(36,20,48,.10); }
.appt__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.appt__title { margin: 0; font-size: 16px; font-weight: 700; }
.appt__status { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.appt__status[data-status="Confirmed"] { background: #A8E6C1; color: #14351f; }
.appt__status[data-status="Tentative"] { background: #E8A020; color: #241430; }
.appt__status[data-status="Cancelled"] { background: #D64545; color: #FAF7F2; }
.appt__when { margin: 10px 0 0; font-size: 14px; color: #24143099; }
</style>

tailwind

<article class="w-[360px] p-[18px_20px] rounded-xl border-l-4 box-border font-sans text-[15px] text-[#241430] bg-[#FAF7F2] shadow-[0_6px_18px_rgba(36,20,48,.10)]" style="border-left-color:#A8E6C1">
  <div class="flex items-center justify-between gap-2.5">
    <h3 class="m-0 text-base font-bold">Dentist checkup</h3>
    <span class="appt-tw-status text-xs font-bold px-2.5 py-1 rounded-full" data-status="Confirmed">Confirmed</span>
  </div>
  <p class="mt-2.5 mb-0 text-sm text-[#241430]/60"><time datetime="2026-08-20">2026-08-20</time> &middot; 10:30 am</p>
</article>
<style>
.appt-tw-status[data-status="Confirmed"] { background: #A8E6C1; color: #14351f; }
.appt-tw-status[data-status="Tentative"] { background: #E8A020; color: #241430; }
.appt-tw-status[data-status="Cancelled"] { background: #D64545; color: #FAF7F2; }
</style>

react

export function Appointment({
  title = "Dentist checkup",
  date = "2026-08-20",
  time = "10:30 am",
  status = "Confirmed",
  accent = "#A8E6C1",
}) {
  const statusColor = { Confirmed: ["#A8E6C1", "#14351f"], Tentative: ["#E8A020", "#241430"], Cancelled: ["#D64545", "#FAF7F2"] }[status] ?? ["#A8E6C1", "#14351f"];
  return (
    <article style={{ font: "15px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 360, padding: "18px 20px", borderRadius: 12, borderLeft: `4px solid ${accent}`, boxSizing: "border-box", boxShadow: "0 6px 18px rgba(36,20,48,.10)" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10 }}>
        <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700 }}>{title}</h3>
        <span style={{ fontSize: 12, fontWeight: 700, padding: "4px 10px", borderRadius: 999, background: statusColor[0], color: statusColor[1] }}>{status}</span>
      </div>
      <p style={{ margin: "10px 0 0", fontSize: 14, color: "#24143099" }}>
        <time dateTime={date}>{date}</time> &middot; {time}
      </p>
    </article>
  );
}