Dead End

html

<div class="de-demo" style="--accent:#BFD9F2;">
  <span class="de-demo__badge">{{unless fixed}}&#10007; Anti-pattern: dead end

tailwind

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

react

export function DeadEnd({
  message = "No results found",
  fixed = false,
  accent = "#BFD9F2",
}) {
  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: dead end"}
      </span>
      <div style={{ padding: "26px 16px", borderRadius: 12, background: "#24143008", textAlign: "center" }}>
        <p style={{ margin: "0 0 4px", fontWeight: 700 }}>{message}</p>
        {fixed ? (
          <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 6 }}>
            <a href="#" style={{ color: accent, fontWeight: 600, textDecoration: "none" }}>&larr; Back to search</a>
            <a href="#" style={{ color: accent, fontWeight: 600, textDecoration: "none" }}>Browse categories</a>
            <a href="#" style={{ padding: 8, borderRadius: 7, background: accent, color: "#241430", fontWeight: 600, textDecoration: "none" }}>Go home</a>
          </div>
        ) : <p style={{ margin: 0, fontSize: 11, color: "#241430aa", fontStyle: "italic" }}>(nothing else on this screen)</p>}
      </div>
    </div>
  );
}