JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="bigCircle"></div>
    <div class="mycircle"></div>
    <div class="mycircle"></div>
</div>

CSS

.mycircle,.bigCircle{width:50px; height:50px; border-radius:30px; background-color:grey; margin:3px}
.mycircle:hover{background:yellow}

    /* Add float to parent to fit width to content */
    .parent {
        float: left;
        clear: both;
    }
    
    .parent:hover > .bigCircle{ 
        background: red;
    }