JSFiddle - React, Tailwind, and code Playground

HTML

<section class="MenuHead">
    <nav class="CorpoMenuHead"> <a href="{$Directory}">Home</a>
 <a href="{$Directory}Empresa">A Empresa</a>
 <a href="{$Directory}Servicos">Serviços</a>
 <a href="{$Directory}Unidades">Unidades</a>
 <a href="{$Directory}Clientes">Clientes</a>
 <a href="{$Directory}Rastreamento">Rastreamento</a>
 <a href="{$Directory}Contato">Contato</a>

    </nav>
    <div class="CorpoMarcador">
        <div class="MarcadorMenu" style="width: 66px; height: 5px; left: 35px;"></div>
    </div>
</section>

CSS

.MenuHead {
    width: 100%;
    height: 55px;
    background: blue;
}
.CorpoMenuHead {
    width: 987px;
    height: 50px;
    margin: auto;
}
.CorpoMenuHead a {
    height: 50px;
    line-height: 50px;
    display: block;
    float: left;
    margin: 0 10px;
    padding: 0 30px;
    font-family:'roboto_condensedregular', sans-serif;
    font-size: 15px;
    color: #FFFFFF;
}
.CorpoMarcador {
    width: 1000px;
    height: 5px;
    margin: auto;
    position: relative;
}
.MarcadorMenu {
    position: absolute;
    background: #FFBF00;
}

JavaScript

$(document).ready(function () {
    var marcador = $('.MarcadorMenu');
    var LeftInicial = marcador.css('left');
    var WidthInicial = marcador.css('width');
    var entrou = false;
    $('.CorpoMenuHead').on('mousemove', function (event) {
        console.log(entrou, event.pageX);
        if (!entrou) {
            marcador.stop().animate({
                left: (event.pageX - LeftInicial.replace('px', '')) + 'px'
            },500, function(){
                entrou = true;
            });
        }else{
        marcador.css('left', (event.pageX - LeftInicial.replace('px', '')) + 'px');
        }

    });

    $('.MenuHead').on('mouseleave', function () {
        entrou = false;
        marcador.stop().animate({
            left: LeftInicial,
            width: WidthInicial
        });
    });
});