dialog

Native dialog element.

html

<div class="dlg-demo">
  <dialog class="dlg" style="--accent:#241430;" open>
    <h3 class="dlg__title">Discard changes?</h3>
    <p class="dlg__body">Anything you&#39;ve typed since the last save will be lost.</p>
    <div class="dlg__actions">
      <button class="dlg__btn dlg__btn--ghost" type="button">Cancel</button>
      <button class="dlg__btn" type="button">Discard</button>
    </div>
  </dialog>
</div>
<style>
.dlg-demo { width: 360px; min-height: 200px; box-sizing: border-box; background: #FAF7F215; padding: 4px; }
.dlg { width: 320px; box-sizing: border-box; font: 15px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border: none; border-radius: 14px; box-shadow: 0 20px 44px rgba(36,20,48,.22); padding: 22px; position: static; margin: 0; }
.dlg::backdrop { background: #24143055; }
.dlg__title { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.dlg__body { margin: 0 0 20px; color: #241430cc; }
.dlg__actions { display: flex; justify-content: flex-end; gap: 10px; }
.dlg__btn { font: 600 14px system-ui, sans-serif; padding: 9px 16px; border-radius: 8px; border: 2px solid var(--accent); background: var(--accent); color: #FAF7F2; cursor: pointer; }
.dlg__btn--ghost { background: transparent; color: var(--accent); }
</style>

tailwind

<div class="w-[360px] min-h-[200px] box-border p-1">
  <dialog open class="w-80 box-border font-sans text-[15px] text-[#241430] bg-[#FAF7F2] border-0 rounded-2xl p-[22px] static m-0 shadow-[0_20px_44px_rgba(36,20,48,0.22)] backdrop:bg-[#24143055]">
    <h3 class="m-0 mb-2.5 text-lg font-bold">Discard changes?</h3>
    <p class="m-0 mb-5 text-[#241430]/80">Anything you&#39;ve typed since the last save will be lost.</p>
    <div class="flex justify-end gap-2.5">
      <button type="button" class="font-semibold text-sm px-4 py-2.5 rounded-lg border-2 bg-transparent" style="border-color:#241430;color:#241430;">Cancel</button>
      <button type="button" class="font-semibold text-sm px-4 py-2.5 rounded-lg border-2 text-[#FAF7F2]" style="border-color:#241430;background:#241430;">Discard</button>
    </div>
  </dialog>
</div>

react

export function DialogElement({
  title = "Discard changes?",
  body = "Anything you've typed since the last save will be lost.",
  accent = "#241430",
  open = true,
}) {
  return (
    <div style={{ width: 360, minHeight: 200, boxSizing: "border-box", padding: 4 }}>
      <dialog
        open={open}
        style={{ width: 320, boxSizing: "border-box", font: "15px/1.5 system-ui, sans-serif", color: "#241430",
          background: "#FAF7F2", border: "none", borderRadius: 14, boxShadow: "0 20px 44px rgba(36,20,48,.22)",
          padding: 22, position: "static", margin: 0 }}
      >
        <h3 style={{ margin: "0 0 10px", fontSize: 18, fontWeight: 700 }}>{title}</h3>
        <p style={{ margin: "0 0 20px", color: "#241430cc" }}>{body}</p>
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 10 }}>
          <button type="button" style={{ font: "600 14px system-ui, sans-serif", padding: "9px 16px", borderRadius: 8, border: `2px solid ${accent}`, background: "transparent", color: accent, cursor: "pointer" }}>Cancel</button>
          <button type="button" style={{ font: "600 14px system-ui, sans-serif", padding: "9px 16px", borderRadius: 8, border: `2px solid ${accent}`, background: accent, color: "#FAF7F2", cursor: "pointer" }}>Discard</button>
        </div>
      </dialog>
    </div>
  );
}