JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>

CSS

#container{
            padding: 30px;
            background: #f2f2f2;
        }
        
        #nav{
            list-style: none;
        }
        
        #nav li{
            float: left;
            margin-right: 10px;
        }
        
        #nav li a{
            font-size: 3em;
            color: #f00;
        }

JavaScript

$(document).ready(function(){
    $('#nav li a').hover(function(){
                $(this).fadeTo(200, 0.5).end();
            },
            function(){
                $(this).fadeTo(200, 1.0).end();
            });
            
            $('#nav li a').click(function(){
                $(this).toggleClass('active')
            });            
        });