JSFiddle - React, Tailwind, and code Playground

by Yolanda Robles

HTML

<h2>Selecciona Idioma</h2>
<div class="nav-container">
  <ul class="nav">
    <li class="active">
      <a href="#">
        <span class="text">Español</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="text">Inglés</span>
      </a>
      </li>
  </ul>
</div>

CSS

.nav{
  list-style-type:none;
  margin:0;
  padding:0;
}

a
{
    text-decoration:none;
    color: black;
}

.active a{
  color: #B93632 !important;
  outline:0;
}

a:visited
{
    color: black;
}

JavaScript

$('li').click(function(){
  
  $(this).addClass('active')
       .siblings()
       .removeClass('active');
    
});