JSFiddle - React, Tailwind, and code Playground

by Charles Cavalcante

HTML

<ul>
  <li><a class="home" href="#">HOME</a></li>
  <li><a href="#">AMBIENTES</a></li>
  <li><a href="#">POSSIBILIDADES</a></li>
  <li><a href="#">SOBRE MIN <i class="fas fa-sort-down"></i></a>
    <ul>
      <li><a href="#">MINHA HISTÓRIA</a></li>
      <li><a href="#">PODER DE MATERIALIZAÇÃO</a></li>
      <li><a href="#">REVISTA DIGITAL</a></li>
    </ul>
  </li>
  <li><a href="#">BLOG</a></li>
  <li><a href="#">LOJAS</a></li>
  <li><a href="#">CONTATO</a></li>
</ul>

CSS

ul li {
  margin: 10px 0;
}
ul li a.bordered {
  border-bottom: 3px solid #000;
}
ul li a {
	color: black;
  text-decoration: none;
}

JavaScript

const links = document.querySelectorAll('ul li a');
for (let i = 0; i < links.length; i++) {
  links[i].onclick = function() {
    // selecione o elemento que tem a classe bordered
    const bordered = document.querySelector('ul li a.bordered');
    if (bordered) {
        // se o elemento existir remove a classe
        bordered.classList.remove('bordered');
    }
    this.classList.add('bordered');
  }
}