Modal Overuse

html

<div class="mo-demo" style="--accent:#D9C8F0;">
  <span class="mo-demo__badge">{{unless fixed}}&#10007; Anti-pattern: modal overuse (stacked dialogs)

tailwind

<div style="width:300px;font-family:system-ui,sans-serif;color:#241430">
  <span class="mo-tw-badge inline-block px-2.5 py-0.5 rounded-full text-[11px] font-bold mb-2.5">{{unless fixed}}&#10007; Anti-pattern: modal overuse (stacked dialogs)

react

export function ModalOveruse({
  title = "Confirm email",
  fixed = false,
  accent = "#D9C8F0",
}) {
  const layer = { position: "absolute", borderRadius: 10, background: "#FAF7F2", boxShadow: "0 10px 26px rgba(36,20,48,.22)", border: "1.5px solid #24143014" };
  return (
    <div style={{ width: 300, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430" }}>
      <span style={{ display: "inline-block", padding: "3px 10px", borderRadius: 999, fontSize: 11, fontWeight: 700, marginBottom: 10, background: fixed ? "#1a7a44" : "#b3261e", color: "#FAF7F2" }}>
        {fixed ? "\u2713 Better" : "\u2717 Anti-pattern: modal overuse (stacked dialogs)"}
      </span>
      {!fixed && (
        <div style={{ position: "relative", height: 130 }}>
          <div style={{ ...layer, inset: "16px 8px 8px 16px", opacity: .5 }} />
          <div style={{ ...layer, inset: "8px 4px 4px 8px", opacity: .75 }} />
          <div style={{ ...layer, inset: 0, padding: 14 }}>
            <p style={{ margin: "0 0 4px", fontWeight: 700 }}>{title}</p>
            <p style={{ margin: "0 0 10px", color: "#241430aa", fontSize: 12 }}>Dialog 3 of 3, on top of two more</p>
            <button type="button" style={{ border: "none", background: accent, borderRadius: 7, padding: "7px 16px", fontWeight: 700, cursor: "pointer" }}>OK</button>
          </div>
        </div>
      )}
      {fixed && (
        <div style={{ borderRadius: 10, border: "1.5px solid " + accent, padding: 14 }}>
          <p style={{ margin: "0 0 4px", fontWeight: 700 }}>{title}</p>
          <p style={{ margin: "0 0 10px", color: "#241430aa", fontSize: 12 }}>One inline panel, no stacking</p>
          <button type="button" style={{ border: "none", background: accent, borderRadius: 7, padding: "7px 16px", fontWeight: 700, cursor: "pointer" }}>OK</button>
        </div>
      )}
    </div>
  );
}