JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

/* 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);
}