JSFiddle - React, Tailwind, and code Playground

by gbos

HTML

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li class="active">ccc</li>
    <li>ddd</li>
</ul>

SCSS

ul {
    display: flex;
    list-style-type: none;
    li {
        cursor: pointer;        
        padding: 10px 20px;
        border-bottom: 2px solid grey;
        color: grey;
        background-color: #eee;
        &.active {
            background-color: white;
            border: 2px solid grey;
            border-bottom: 0;
            color: black;
            font-weight: bold;
        }
        &:hover {
            color: black;
        }
    }
}

JavaScript

var $ = document.querySelector.bind(document), 
        $$ = document.querySelectorAll.bind(document);
        
    Element.prototype.on = Element.prototype.addEventListener;
    NodeList.prototype.forEach = Array.prototype.forEach;
    
    
    
$$('li').forEach(li => li.on('click', elem => {
	$('li.active').classList.toggle('active');
    elem.target.classList.toggle('active');
}))