JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
  <a href="#">Acceuil</a>
  <a href="#">Green</a>
  <a href="#">Blue</a>
  <a href="#">Red</a>
</div>

CSS

#menu>a {
    margin-left: -1px;
    padding: 10px 15px;
	font-family: 'PT Sans', sans-serif;
    color: #000;
    background-color: #c03;
}

#menu>a:hover,
#menu .selected {
	background-color: rgba(0, 0, 0, 0.1);
	color: #fff;
}

JavaScript

var oRadio = document.querySelectorAll('#menu>a'),
    i = 0,
    nb = oRadio.length;

for(; i <nb; i++) {
    
    oRadio[i].onclick = function(e){

        e.preventDefault ? e.preventDefault() : (e.returnValue = false);
        
        for(var i=0; i<nb; i++) oRadio[i].className = "";
        
        (e.target || e.srcElement).className = "selected";
        
    };
    
}