JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu-fixo">
    <nav id="nav-menu">
        <ul>
            <li><a id="link" href="#home" title="Página Inicial"><div id="bolinha-fora"></div> Home </a>
            </li>
            <li><a id="link" href="#empresa" title="Empresa"> <div id="bolinha-fora"></div> Empresa </a>
            </li>
            <li><a id="link" href="#servicos" title="Serviço"> <div id="bolinha-fora"></div>Serviços </a>
            </li>
            <li> <a id="link" href="#frota" title="Clientes"> <div id="bolinha-fora"></div> Nossa Frota </a>
            </li>
            <li><a id="link" href="#qualidade" title="Contato"> <div id="bolinha-fora"></div> Qualidade </a>
            </li>
            <li> <a id="link" href="#contato" title="Contato"> <div id="bolinha-fora"></div> Contato </a>
            </li>
        </ul>
    </nav>
</div>

CSS

body {
    margin: 0;
    background-color: #010b15;
    letter-spacing: normal;
}
#margem {
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}
#margem-textos {
    width:60%;
    height: 700px;
    float: right;
}
section {
    height : 100vh;
}
p {
    color: #fff;
    font-size: 15px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1 {
    font: 60px unisansheavy, helveticaneue, Arial, Tahoma, Sans-serif;
    text-align: center;
    padding: 0;
    margin: 40% 0 0;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: -4px 0px #1FA1FF;
    letter-spacing: 5px;
}
h2 {
    font:70px code-bold, helveticaneue, Arial, Tahoma, Sans-serif;
    text-align: left;
    margin: 50% 0 0 0;
    padding: 0;
    font-weight: bold;
    color: #1FA1FF;
    text-transform: uppercase;
    letter-spacing: 5px;
}
h3 {
    font:30px code-bold, helveticaneue, Arial, Tahoma, Sans-serif;
    text-align: left;
    padding: 0;
    font-weight: bold;
    color: #1FA1FF;
    text-transform: uppercase;
    letter-spacing: 3px;
}
h4 {
    font:20px code-bold, helveticaneue, Arial, Tahoma, Sans-serif;
    text-align: center;
    padding: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin:10px;
}
/* LOGOTIPO */
 #fap-logo {
    position:fixed;
    width:20%;
    margin:0;
    padding:0;
    display:block;
    left: 40%;
    top:3%;
}
/*MENU*/
 #menu-fixo {
    width:350px;
    margin: 0 10%;
    position:fixed;
    top:0;
}
#nav-menu, ul {
    margin: 60px 0 0 0;
    list-style: none;
    font: 15px code-bold, helveticaneue, Arial, Tahoma, Sans-serif;
}
#nav-menu li a {
    color: #fff;
    padding: 0px 10px 0px 10px;
    text-decoration: none;
    list-style:none;
    line-height:55px;
    letter-spacing: 2px;
}
#bolinha-fora {
    border-radius: 30px;
    width: 15px;
    height: 15px;
    border: 3px solid #FFFFFF;
    float: left;
    margin: 15px 0 13px 0;
}
.ativo {
    background-color: #1FA1FF;
   ...

JavaScript

(function () {
    var links = document.querySelectorAll('#nav-menu ul li');
    [].forEach.call(links, function (li) {
        li.addEventListener('click', mudarClasses);
    });

    function mudarClasses() {
        [].forEach.call(links, function (li) {
            li.classList.remove('ativo');
        });
        this.classList.add('ativo');
    }
})();