JSFiddle - React, Tailwind, and code Playground

by learner001

HTML

<h2>Click on the Tabs to see how the Background Color changes on Click</h2>

<div id="header">
    <div id="menu">
        <ul class="current_page_itemm">
            <li class="current_page_item"><a href="#">Home</a>

            </li>
            <li><a href="#">Jobseeker Profiles</a>

            </li>
            <li><a href="#">Employer Profiles</a>

            </li>
            <li><a href="#">Jobs</a>

            </li>
            <li><a href="#">More</a>

            </li>
        </ul>
    </div>
</div>

CSS

#menu ul li.selected {
    background: #910000;
    color:#FFFFFF;
}
#menu ul {
    margin: 0;
    padding: 25px 0 0 20px;
    list-style: none;
    line-height: normal;
}
#menu li {
    display: block;
    float: left;
    background: black;
}
#menu a {
    display: block;
    float: left;
    margin-right: 17px;
    padding: 5px 8px;
    text-decoration: none;
    font: 20px Georgia, "Times New Roman", Times, serif;
    color: #FFFFFF;
}
#menu a:hover {
    text-decoration: underline;
    background: #910000;
    color:#FFFFFF;
}
#menu a:active {
    background: #910000;
    color:black;
}

JavaScript

$(document).ready(function () {
    $('#menu ul li a').click(function (ev) {
        $('#menu ul li').removeClass('selected');
        $(ev.currentTarget).parent('li').addClass('selected');
    });
});