JSFiddle - React, Tailwind, and code Playground
HTML
<a class="menu active">link 1</a>
<a class="menu">link 2</a>
<a class="menu">link 3</a>
CSS
.menu {
color:blue;
text-decoration: underline;
cursor:pointer;
}
.menu.active {
color:red;
}
JavaScript
[].forEach.call(document.querySelectorAll(".menu"), function (item) {
item.addEventListener("click", function (e) {
if (this.classList.contains("active")) return;
var active = document.querySelector(".menu.active");
active && active.classList.remove("active");
this.classList.add("active");
});
});