JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#botao1" class="botao1">Um</a><br>
<a href="#" class="botao2">Dois</a><br>
<a href="#" class="botao3">Tres</a>


<ul>
  <li class="teste1 selecionado">Primeiro</li>
  <li class="teste2">Segundo</li>
  <li class="teste3">Terceiro</li>
</ul>

CSS

.selecionado {
    background:#CCC;
    color:#000;
    font:13px verdana;
    padding:3px;
    cursor: pointer;
}

JavaScript

$(".botao1").click(function(){
$(".teste1").addClass('selecionado');
    $(".teste2").removeClass('selecionado');
    $(".teste3").removeClass('selecionado');
    
    
});
$(".botao2").click(function(){
$(".teste2").addClass('selecionado');
    $(".teste1").removeClass('selecionado');
    $(".teste3").removeClass('selecionado');
    
});
$(".botao3").click(function(){
$(".teste3").addClass('selecionado');
    $(".teste1").removeClass('selecionado');
    $(".teste2").removeClass('selecionado');
    
    
});