JSFiddle - React, Tailwind, and code Playground

HTML

<div id="A">
    <div id="B"></div>
    <div id="C"></div>
</div>

CSS

#A{
}

#A:hover {
}

#C{
    position:absolute;
    width:50%;
    height:50%;
    left:25%;
    top:25%;
    background-color:gray
}

#C:hover {
    background:blue;
}

#B{
    position:absolute;
    width:100%;
    height:100%;
    top:0%;
    left:0%;
    background-color:black;   
}

#B:hover{
    background:red;
}