JSFiddle - React, Tailwind, and code Playground
HTML
<div class="menubutton">test1</div>
<div class="menubutton">test2</div>
<div class="menubutton">test3</div>
<div class="menubutton">test4</div>
CSS
.menubutton {
cursor:pointer;
display:inline-block;
padding:20px 10px;
background-color:orange;
}
.menubutton:hover {
background-color:pink;
}
.menubutton:active {
background-color:yellow;
}
.current {
background-color:blue;
color:white;
}
.current:hover {
background-color:lightblue;
color:black;
}
JavaScript
$("div").click(function () {
$("div").removeClass("current")
$(this).addClass("current");
});