return (

<div className="space-y-6 font-mono text-sm leading-relaxed">

<p>

An <strong className="text-current">Anti-Pattern</strong> is a common

response to a recurring problem that is usually ineffective and risks

being highly counterproductive.

</p>

<p>

It's a solution that looks good on the surface but has bad consequences

in the long run.

</p>

<div className="border-l-2 border-red-500/50 pl-4 py-2 my-6">

<h4 className="text-xs font-bold text-red-400 uppercase tracking-widest mb-3">

Common React Anti-Patterns

</h4>

<ul className="space-y-2 text-xs text-gray-400">

<li>-- Prop Drilling (passing props down 5+ levels)</li>

<li>-- Defining components inside other components</li>

<li>

-- Using indexes as keys in lists (when items can change order)

</li>

<li>-- Mutating state directly</li>

</ul>

</div>

</div>

);