JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-nav">
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
    </ul>
</div>

CSS

#main-nav {
    -webkit-transition:opacity 0.3s ease-out;   
    -moz-transition:opacity 0.3s ease-out;   
    -ms-transition:opacity 0.3s ease-out;   
    -o-transition:opacity 0.3s ease-out;   
    transition:opacity 0.3s ease-out;
}

#main-nav ul {
    list-style: none;
}

#main-nav ul:hover li {
    opacity: 0.2;
    transition:opacity 0.2s ease-out;
}

#main-nav ul:hover li:hover {
    opacity: 1;
}