JSFiddle - React, Tailwind, and code Playground

HTML

<div id="divA" style="width: 400px; height: 400px; background-color: #FF0000;">
    <div id="divB" style="float: left; width: 200px; height: 200px; background-color: #FFFF00;">
        <div id="divC" >
        </div>
    </div>
</div>

CSS

#divB:hover {background-color: #000 !important;}
#divC {float: left; width: 100px; height: 100px; background-color: #FF00FF;}
#divC:hover {background-color: #000;}