JSFiddle - React, Tailwind, and code Playground

by Megi93

HTML

<ul id="list">
	<li>asdas</li>
	<li>asdasdasdas</li>
	<li>asdaass</li>
	<li>asdasdas</li>
</ul>

CSS

ul#list {
    margin: 0;
	padding: 0;
    text-align: center;
    list-style-type: none;
    background: orange;
}

.active {
	color: orange;
	background:red;
	font-weight: bold;
}

JavaScript

var list = document.getElementById('list').querySelectorAll('li');
for(var i=0; i<list.length; i++) {
	list[i].onclick = function() {
		if(document.getElementById('list').querySelector('li.active')) {
			document.getElementById('list').querySelector('li.active').className = '';
		}
		this.className = 'active';
	}
}