Excessive Nesting

html

<div class="en-demo" style="--accent:#D9C8F0;">
  <span class="en-demo__badge">{{unless fixed}}&#10007; Anti-pattern: excessive nesting (6 levels)

tailwind

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

react

export function ExcessiveNesting({
  label = "Total: $42.00",
  fixed = false,
  depth = 6,
  accent = "#D9C8F0",
}) {
  const wrap = { border: "1.5px dashed #24143033", borderRadius: 6, padding: 8 };
  let nested = <div style={{ border: "1.5px solid " + accent, borderRadius: 6, padding: 8, background: "#FAF7F2", fontWeight: 700, textAlign: "center" }}>{label}</div>;
  for (let i = 0; i < 5; i++) nested = <div style={wrap}>{nested}</div>;
  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: excessive nesting (" + depth + " levels)"}
      </span>
      {!fixed && nested}
      {fixed && <div style={{ padding: 14, borderRadius: 10, background: accent, fontWeight: 700, textAlign: "center" }}>{label}</div>}
    </div>
  );
}