JSFiddle - React, Tailwind, and code Playground

HTML

<article>
    This works.
    <a href="#" id="head">head</a>
    <div id="arm">arm</div>
</article>

<article>
    This does not.
    <a href="#" id="leg">leg</a>
</article>
<article>
    <div id="feet">feet</div>
</article>

CSS

#head:focus ~ #arm {
     background-color: red;   
}

#leg:focus ~ feet {
    backgorund-color: green;
}