JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="buttons">
   <li class="a">button a</li>
   <li class="b">button b</li>
   <li class="items">
       <div class="item-a"></div>
       <div class="item-b"></div>
       <div class="item-b"></div>
       <div class="item-a"></div>
       <div class="item-b"></div>
   </li>
</ul>

CSS

.a, .b, .items div { width: 50px; height: 50px;}
.item-a { background: salmon; }
.item-b { background: lightblue; }

.a:hover ~ li .item-a {
    background: red;
}

.b:hover ~ li .item-b {
    background: blue;
}