JSFiddle - React, Tailwind, and code Playground

by nickadeemus2002

HTML

<nav id="main">
        <ul>
            <li>
                <a>work</a>
            </li>
            <li>
                <a>about me</a>
            </li>
            <li>
                <a>contact</a>
            </li>           
        </ul>
    </nav>

CSS

#main{padding:20px;font-size:1.3em;}
#main ul{list-style:none;}
#main ul li{display:inline;margin:3px 5px;}
nav#main ul li a{color:#000000;}

nav#main ul li.inactive{border-bottom:1px solid #000;}
nav#main ul li.inactive a{color:#eee;}
nav#main ul li.active{background-color:#a4a4a4;border-bottom:1px solid #ff0000;}
nav#main ul li.active a{color:#fff; }

JavaScript

$(document).ready(function(){

var nava = "nav#main ul li";

$(nava).hover(function(){
    $(this).addClass("active").siblings('li').css({'color':'#ff0000'});
});

$(nava).click(function(){
    $(this).removeClass().addClass("active");
});



});