JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Entry a</li>
    <li>Entry b</li>
    <li>Entry c</li>
    <li>Entry d</li>
    <li>Entry e</li>
    <li>Entry f</li>
</ul>

CSS

ul {
    background-color: green;
    display: inline-block;
    width: auto;
    padding: 20px;
}

ul > li {
    margin: 5px;
    padding: 10px;
    background-color: red;
    cursor: pointer;
    
    opacity: 1.0;
    transition: opacity .2s ease-in-out;
}

ul > li:hover {
    opacity: 1.0;
}

ul:hover > li:not(:hover) {
    opacity: 0.5;
}