Modal

Blocking overlay requiring interaction.

html

<div class="modal-demo modal-demo--backdrop">
  <div class="modal modal--danger" style="width:380px;" role="dialog" aria-modal="true" aria-labelledby="modal-title">
    <h3 class="modal__title" id="modal-title">Delete this item?</h3>
    <p class="modal__message">This can&#39;t be undone. The item will be permanently removed.</p>
    <div class="modal__actions">
      <button class="modal__btn modal__btn--ghost" type="button">Cancel</button>
      <button class="modal__btn modal__btn--solid" style="background:#F5C2E0;border-color:#F5C2E0;" type="button">Confirm</button>
    </div>
  </div>
</div>
<style>
.modal-demo { display: grid; place-items: center; min-height: 220px; border-radius: 12px; }
.modal-demo--backdrop { background: rgba(36,20,48,.45); padding: 24px; }
.modal { font: 16px/1.5 system-ui, sans-serif; background: #FAF7F2; color: #241430; border-radius: 14px; border-top: 6px solid; box-shadow: 0 20px 44px rgba(36,20,48,.28); padding: 24px; box-sizing: border-box; }
.modal--neutral { border-top-color: #241430; }
.modal--success { border-top-color: #A8E6C1; }
.modal--danger { border-top-color: #F5C2E0; }
.modal__title { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.modal__message { margin: 0 0 20px; font-size: 14px; color: #241430cc; }
.modal__actions { display: flex; justify-content: flex-end; gap: 10px; }
.modal__btn { font: 500 14px system-ui, sans-serif; padding: 9px 16px; border-radius: 8px; border: 1.5px solid transparent; cursor: pointer; }
.modal__btn--ghost { background: transparent; border-color: #24143033; color: #241430; }
.modal__btn--solid { color: #FAF7F2; }
.modal__btn:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div class="grid place-items-center min-h-[220px] rounded-xl bg-[#241430]/45 p-6">
  <div role="dialog" aria-modal="true" aria-labelledby="modal-tw-title" class="modal-tw modal-tw--danger bg-[#FAF7F2] text-[#241430] rounded-2xl border-t-[6px] shadow-2xl p-6 box-border" style="width:380px;">
    <h3 id="modal-tw-title" class="mb-2 text-lg font-semibold">Delete this item?</h3>
    <p class="mb-5 text-sm text-[#241430]/80">This can&#39;t be undone. The item will be permanently removed.</p>
    <div class="flex justify-end gap-2.5">
      <button type="button" class="px-4 py-2 rounded-lg text-sm font-medium border border-[#24143033]">Cancel</button>
      <button type="button" class="px-4 py-2 rounded-lg text-sm font-medium text-[#FAF7F2]" style="background:#F5C2E0;border-color:#F5C2E0">Confirm</button>
    </div>
  </div>
</div>
<style>
.modal-tw--neutral { border-top-color: #241430; }
.modal-tw--success { border-top-color: #A8E6C1; }
.modal-tw--danger { border-top-color: #F5C2E0; }
</style>

react

export function Modal({
  title = "Delete this item?",
  message = "This can't be undone. The item will be permanently removed.",
  variant = "danger",
  width = 380,
  backdrop = true,
  accent = "#F5C2E0",
}) {
  const stripe = { neutral: "#241430", success: "#A8E6C1", danger: "#F5C2E0" }[variant] ?? accent;
  return (
    <div style={{ display: "grid", placeItems: "center", minHeight: 220, borderRadius: 12,
      background: backdrop ? "rgba(36,20,48,.45)" : "transparent", padding: backdrop ? 24 : 0 }}>
      <div role="dialog" aria-modal="true" aria-labelledby="modal-title" style={{ width, boxSizing: "border-box", background: "#FAF7F2", color: "#241430", borderRadius: 14,
        borderTop: `6px solid ${stripe}`, boxShadow: "0 20px 44px rgba(36,20,48,.28)", padding: 24 }}>
        <h3 id="modal-title" style={{ margin: "0 0 8px", fontSize: 18, fontWeight: 600 }}>{title}</h3>
        <p style={{ margin: "0 0 20px", fontSize: 14, color: "#241430cc" }}>{message}</p>
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 10 }}>
          <button type="button">Cancel</button>
          <button type="button" style={{ background: accent, borderColor: accent, color: "#FAF7F2" }}>Confirm</button>
        </div>
      </div>
    </div>
  );
}