JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>

<meta charset=utf-8>
<meta name=Author content="b.b. Troy III p.a.e.">

   <title>bacground link sync</title>
   <style></style>

</head>

<body>
<div id=lineTop class=linha> </div>
    <div id=wrapper>
    <div id=menu>
        <a href="home.html" class="home active">h o m e</a>
        <a href="#" class=trabalhos>t r a b a l h o s</a>
        <a href="#" class=experimentos>e x p e r i m e n t o s</a>
        <a href="contato.html" class=contato>c o n t a t o</a>
    </div>
    </div>

<script></script>
</body>
</html>

CSS

.linha {
          width: 100%;
          height: 3px;
          background-color: #E51400;
}
#menu {
        width: 100%;
        text-align: center;
        font-weight: 400;
        font-size: 1.6em;
        color: #333;
}
.home,.contato,.trabalhos,.experimentos  {
        text-decoration: none;
        border-bottom-width: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #E51400;
        padding-right: 5px;
        padding-left: 5px;
        margin: 10px;
        -webkit-transition: all .2s ease-in-out 0s;
        -moz-transition: all .2s ease-in-out 0s;
        -ms-transition: all .2s ease-in-out 0s;
        -o-transition: all .2s ease-in-out 0s;
        transition: all .2s ease-in-out 0s;
        color: #333;
}

.home:hover,.home.active {
          background-color: #E51400;
          color: #fff;
}
.trabalhos:hover,.trabalhos.active {
        background-color: #8CBF26;
        border-bottom-color: #8CBF26;
        color: #fff;
}

.experimentos:hover,.experimentos.active {
        background-color: #6E155F;
        color: #fff;
        border-bottom-color: #6E155F;
}
.contato:hover,.contato.active {
        background-color: #1BA1E2;
        border-bottom-color: #1BA1E2;
        color: #fff;
}

JavaScript

activate : syncAttr(lineTop.style, "backgroundColor", menu.children);    

     function syncAttr(t, a, x){
            function cS(x){return getComputedStyle(x,0)||x.currentStyle};
            var L = x[0] ? x : [x], i = 0, z,tm;
            while(L[i]){ 
                L[i].onmouseout = function(){t[a]="";clearInterval(tm)};
                L[i++].onmouseover= attSync;}

            function attSync(){z=this; 
                tm=setInterval(function(){
                if(/rgba|tran/.test(cS(z)[a])){ t[a]=cS(z)[a];
                }else{ t[a]=cS(z)[a]; clearInterval(tm)}},8)}
            }