Alert Dialog

Presents important information.

html

<div class="ad-demo">
  <div class="ad-backdrop"></div>
  <div class="ad-dialog ad-dialog--warning" style="width:340px;" role="alertdialog" aria-modal="true" aria-labelledby="ad-title">
    <div class="ad-icon" aria-hidden="true">!</div>
    <h3 id="ad-title" class="ad-title">Connection lost</h3>
    <p class="ad-message">We couldn&#39;t reach the server. Check your connection and try again.</p>
    <div class="ad-actions">
      <button type="button" class="ad-ok" style="background:#E8A020;border-color:#E8A020;">OK</button>
    </div>
  </div>
</div>
<style>
.ad-demo { position: relative; min-height: 420px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #BFD9F2, #D9C8F0); }
.ad-backdrop { position: absolute; inset: 0; background: rgba(36,20,48,.45); }
.ad-dialog { position: relative; z-index: 1; 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; text-align: center; }
.ad-dialog--info { border-top-color: #BFD9F2; }
.ad-dialog--warning { border-top-color: #E8A020; }
.ad-dialog--danger { border-top-color: #F5C2E0; }
.ad-icon { width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 18px; background: #24143012; }
.ad-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.ad-message { margin: 0 0 20px; font-size: 14px; color: #241430cc; }
.ad-actions { display: flex; justify-content: center; }
.ad-ok { font: 600 14px system-ui, sans-serif; padding: 9px 28px; border-radius: 8px; border: 1.5px solid transparent; color: #FAF7F2; cursor: pointer; }
.ad-ok:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div class="relative min-h-[420px] grid place-items-center rounded-xl" style="background:linear-gradient(135deg,#BFD9F2,#D9C8F0);">
  <div class="absolute inset-0 bg-[#241430]/45"></div>
  <div role="alertdialog" aria-modal="true" aria-labelledby="ad-tw-title" class="ad-tw ad-tw--warning relative z-10 font-sans bg-[#FAF7F2] text-[#241430] rounded-2xl border-t-[6px] shadow-2xl p-6 box-border text-center" style="width:340px;">
    <div aria-hidden="true" class="w-10 h-10 mx-auto mb-3 rounded-full grid place-items-center font-bold text-lg bg-[#24143012]">!</div>
    <h3 id="ad-tw-title" class="mb-2 text-lg font-semibold">Connection lost</h3>
    <p class="mb-5 text-sm text-[#241430]/80">We couldn&#39;t reach the server. Check your connection and try again.</p>
    <div class="flex justify-center">
      <button type="button" class="px-7 py-2 rounded-lg text-sm font-semibold text-[#FAF7F2]" style="background:#E8A020;border-color:#E8A020">OK</button>
    </div>
  </div>
</div>
<style>
.ad-tw--info { border-top-color: #BFD9F2; }
.ad-tw--warning { border-top-color: #E8A020; }
.ad-tw--danger { border-top-color: #F5C2E0; }
</style>

react

export function AlertDialog({
  title = "Connection lost",
  message = "We couldn't reach the server. Check your connection and try again.",
  tone = "warning",
  accent = "#E8A020",
  width = 340,
  backdrop = true,
}) {
  const stripe = { info: "#BFD9F2", warning: "#E8A020", danger: "#F5C2E0" }[tone] ?? accent;
  return (
    <div style={{ position: "relative", minHeight: 420, display: "grid", placeItems: "center",
      borderRadius: 12, background: "linear-gradient(135deg, #BFD9F2, #D9C8F0)" }}>
      {backdrop && <div style={{ position: "absolute", inset: 0, background: "rgba(36,20,48,.45)" }} />}
      <div role="alertdialog" aria-modal="true" aria-labelledby="ad-title" style={{ position: "relative",
        zIndex: 1, 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, textAlign: "center" }}>
        <div aria-hidden="true" style={{ width: 40, height: 40, margin: "0 auto 12px", borderRadius: "50%",
          display: "grid", placeItems: "center", fontWeight: 700, fontSize: 18, background: "#24143012" }}>!</div>
        <h3 id="ad-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: "center" }}>
          <button type="button" style={{ background: accent, borderColor: accent, color: "#FAF7F2" }}>OK</button>
        </div>
      </div>
    </div>
  );
}