JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
</div>

<div class="parent">
    <div class="child">3</div>
    <div class="child">4</div>
</div>

CSS

div {border: 1px solid #888; }

.parent {
    width: 200px;
    margin: 20px;
}

.child {
    padding: 10px;
    margin: 20px;
}

.parent:hover { background: #fcc; }

.parent .child:hover { background: #cfc; }

.parent:hover .child { background: #ffc; }