JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
             <li class="current"><a href="#">HOME</a></li>
             <li><a href="#">SERVICE</a></li>
             <li><a href="#">ABOUTUS</a></li>                                   
             <li><a href="#">PROFILE</a></li>
    </ul>

CSS

.current a {
  color: #03c9a9;
}
a,
a:active,
a:focus {
  color: #fff;
}
a,
a:hover,
a:active,
a:focus {
  outline: 0;
  border: 0;
  text-decoration: none;
  color: #000;
}
.li-logo {
  text-align: left;
}

JavaScript

var opener = { 

  init:function()  { 
              
         this.menuselection();
   },
   menuselection:function(){
   	
   	$('ul li a').on('click', function (){
   		$('ul li').addClass('current');
   	});
   	
   }
    
    
}
opener.init();