JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<ul>
    <li class="effect" id="1">1</li>
<li class="effect" id="2">2</li>
<li class="effect" id="3">3</li>
<li class="effect" id="4">4</li>
<li class="effect" id="5">5</li>
    <li class="effect" id="6">6</li></ul></table>

CSS

.effect {border: solid 1px black;  background: red; display: inline; padding: 20px; opacity: 0.5;}
.effect:hover {background: yellow; opacity: 1}
ul:hover li{background: green;}