JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
            <ul>
                <li id="agenda-link"><a class="float" class="scroll" href="#agenda">Agenda</a></li>
                <li id="musicas-link"><a class="float" class="scroll" href="#musicas">MĂşsicas</a></li>
                <li id="compre-link"><a class="float" class="scroll" href="#compre">Compre</a></li>
                <li	id="contato-link"><a class="float" class="scroll" href="#contato">Contato</a></li>   
            </ul>
    </div>	<!-- END header -->

CSS

#header {
	font: 28px 'Open Sans', sans-serif;
	font-weight: 300;
	width: 80%;
	margin: 0 auto;
	height:90px;
}
#header ul {
	width: 65%;
	list-style:none;
	position:relative;
	top:40%;
}
#header li {
	display:inline;
	padding-left:8%;
}
#header li a {
	text-decoration:none;
	color:#cebc85;
}
#header li a:hover {
	color:#cebc85;
	font-weight:400;
}

/* Float */
.float {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.float:hover, .float:focus, .float:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}