Overlay

Layer above existing content.

html

<div class="overlay-demo">
  <div class="overlay-demo__bg">
    <div class="overlay-demo__row"></div>
    <div class="overlay-demo__row"></div>
    <div class="overlay-demo__row"></div>
  </div>
  <div class="overlay-demo__scrim" style="opacity:0.55;"></div>
  <div class="overlay-panel overlay-panel--center" style="background:#A8E6C1;">
    <p class="overlay-panel__text">New comments have been added to this document.</p>
  </div>
</div>
<style>
.overlay-demo { position: relative; min-height: 260px; overflow: hidden; border-radius: 12px; background: #FAF7F2; border: 1.5px solid #24143020; box-sizing: border-box; }
.overlay-demo__bg { position: absolute; inset: 0; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.overlay-demo__row { height: 14px; border-radius: 6px; background: #24143014; }
.overlay-demo__row:nth-child(2) { width: 80%; }
.overlay-demo__row:nth-child(3) { width: 58%; }
.overlay-demo__scrim { position: absolute; inset: 0; background: #241430; }
.overlay-panel { position: absolute; left: 22px; right: 22px; border-radius: 10px; padding: 16px 18px; box-shadow: 0 12px 28px rgba(36,20,48,.22); box-sizing: border-box; }
.overlay-panel--top { top: 22px; }
.overlay-panel--center { top: 50%; transform: translateY(-50%); }
.overlay-panel--bottom { bottom: 22px; }
.overlay-panel__text { margin: 0; font: 500 15px/1.5 system-ui, sans-serif; color: #241430; }
</style>

tailwind

<div class="overlay-tw relative min-h-[260px] overflow-hidden rounded-xl bg-[#FAF7F2] border-[1.5px] border-[#24143020] box-border">
  <div class="absolute inset-0 p-[22px] flex flex-col gap-2.5">
    <div class="h-3.5 rounded-md bg-[#24143014]"></div>
    <div class="h-3.5 w-4/5 rounded-md bg-[#24143014]"></div>
    <div class="h-3.5 w-[58%] rounded-md bg-[#24143014]"></div>
  </div>
  <div class="absolute inset-0 bg-[#241430]" style="opacity:0.55;"></div>
  <div class="overlay-tw-panel overlay-tw-panel--center absolute left-[22px] right-[22px] rounded-[10px] p-4 shadow-2xl box-border" style="background:#A8E6C1;">
    <p class="m-0 text-[15px] font-medium text-[#241430]">New comments have been added to this document.</p>
  </div>
</div>
<style>
.overlay-tw-panel--top { top: 22px; }
.overlay-tw-panel--center { top: 50%; transform: translateY(-50%); }
.overlay-tw-panel--bottom { bottom: 22px; }
</style>

react

export function Overlay({
  text = "New comments have been added to this document.",
  color = "#A8E6C1",
  opacity = 0.55,
  position = "center",
  dimmed = true,
}) {
  const posStyle = {
    top: { top: 22 },
    center: { top: "50%", transform: "translateY(-50%)" },
    bottom: { bottom: 22 },
  }[position] ?? {};
  return (
    <div style={{ position: "relative", minHeight: 260, overflow: "hidden", borderRadius: 12,
      background: "#FAF7F2", border: "1.5px solid #24143020", boxSizing: "border-box" }}>
      <div style={{ position: "absolute", inset: 0, padding: 22, display: "flex", flexDirection: "column", gap: 10 }}>
        <div style={{ height: 14, borderRadius: 6, background: "#24143014" }} />
        <div style={{ height: 14, width: "80%", borderRadius: 6, background: "#24143014" }} />
        <div style={{ height: 14, width: "58%", borderRadius: 6, background: "#24143014" }} />
      </div>
      {dimmed && <div style={{ position: "absolute", inset: 0, background: "#241430", opacity }} />}
      <div style={{ position: "absolute", left: 22, right: 22, borderRadius: 10, padding: "16px 18px",
        boxShadow: "0 12px 28px rgba(36,20,48,.22)", boxSizing: "border-box", background: color, ...posStyle }}>
        <p style={{ margin: 0, fontSize: 15, fontWeight: 500, color: "#241430" }}>{text}</p>
      </div>
    </div>
  );
}