JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="parent">
        
    </div>
    <div class="parent">
        
    </div>
    <div class="child" style="top: 0; left: 0;">
        
    </div>
    <div class="child" style="top: 25px; left: 50px;">
    
    </div>
    <div class="child" style="top: 125px; left: 0px;">
    
    </div>
    <div class="child" style="top: 150px; left: 50px;">
    
    </div>
</div>

CSS

#container { 
    position: relative; 
    display: inline-block; }
.parent { 
    width: 100px;
    height: 100px;
    border: 1px solid #000; }
#container:hover .parent { background: red; }
.child {
    background: #000; 
    position: absolute;
    width: 25px;
    height: 25px;
    display: inline-block; }