JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu-fixo">
   <nav id="nav-menu">    
    <ul>
      <a id="link" href="#home" title="Página Inicial"><div id="bolinha-fora"></div><li> Home </a></li>
      <a id="link" href="#empresa" title="Empresa"> <div id="bolinha-fora"></div><li> Empresa </a></li>
      <a id="link" href="#servicos" title="Serviço"> <div id="bolinha-fora"></div><li>Serviços </a></li>                       				
      <a id="link" href="#frota" title="Clientes"> <div id="bolinha-fora"></div><li> Nossa Frota </a></li>						
      <a id="link" href="#qualidade" title="Contato"> <div id="bolinha-fora"></div><li> Qualidade </a></li>
      <a id="link" href="#contato" title="Contato"> <div id="bolinha-fora"></div><li> 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;
	transition-property:background-color ;
	transition-duration: 0.5s;
}

#bolinha-fora.active{
	background-color: #1FA1FF;
}

.active > span{
	background:#1FA1FF;
}

JavaScript

$(function() {
$('#bolinha-fora').click(function(){
  $('#bolinha-fora').removeClass('ativo');
  $(this).addClass('ativo');     
});
});