Dark Pattern

html

<div class="dp-demo" style="--accent:#A8E6C1;">
  <span class="dp-demo__badge">{{unless fixed}}&#10007; Anti-pattern: dark pattern (confirmshaming)

tailwind

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

react

export function DarkPattern({
  title = "Wait! Before you go...",
  fixed = false,
  accent = "#A8E6C1",
}) {
  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: dark pattern (confirmshaming)"}
      </span>
      <div style={{ padding: 16, borderRadius: 12, background: "#FAF7F2", border: "1.5px solid #24143022" }}>
        <p style={{ margin: "0 0 6px", fontWeight: 700, fontSize: 15 }}>{title}</p>
        <p style={{ margin: "0 0 14px", color: "#241430cc" }}>Keep 20% off for life when you stay subscribed.</p>
        {!fixed && (
          <>
            <button type="button" style={{ display: "block", width: "100%", boxSizing: "border-box", padding: 11, borderRadius: 8, border: "none", background: accent, fontWeight: 700, cursor: "pointer", marginBottom: 8 }}>Yes, keep my discount</button>
            <button type="button" style={{ display: "block", width: "100%", boxSizing: "border-box", padding: 4, border: "none", background: "transparent", color: "#24143055", fontSize: 10, cursor: "pointer" }}>No thanks, I like paying full price</button>
          </>
        )}
        {fixed && (
          <div style={{ display: "flex", gap: 8 }}>
            <button type="button" style={{ flex: 1, padding: 11, borderRadius: 8, border: "none", background: accent, fontWeight: 700, cursor: "pointer" }}>Keep discount</button>
            <button type="button" style={{ flex: 1, padding: 11, borderRadius: 8, border: "1.5px solid " + accent, background: "transparent", color: "#241430", fontWeight: 600, cursor: "pointer" }}>No thanks</button>
          </div>
        )}
      </div>
    </div>
  );
}