JSFiddle - React, Tailwind, and code Playground

HTML

<div  style='margin: auto; width: 100%; overflow:auto; height: 75px; text-align: center; margin-bottom: -40; margin-top: -10;'>
<h2 class='menuitem'><a href='/' class='menulink'>Home</a></h2>
<h2 class='menuitem'><a href='news' class='menulink'>News</a></h2>
<h2 class='menuitem'><a href='userlist' class='menulink'>Users</a></h2>
<h2 class='menuitem'><a href='suggestions' class='menulink'>Ideas</a></h2>
<h2 class='menuitem'><a href='newswrite' class='menulink'>Write</a></h2>
</div>

CSS

.menuitem{
position:absolute;
float:left; 
left: 20px; 
color:#CCCCCC;
}

.menulink:link{
color: inherit;
}

.menulink:visited{
color: inherit;
}

.menulink:hover{
color:black;
}

JavaScript

$(document).ready(function(){
    $(".menuitem").css('margin-left', -80);
    var url = window.location;
    $('.menulink').filter(function() {
      return this.href == url;
    }).removeClass('menulink');
    //$(".menuitem").animate({marginLeft: "20px"}, 2000);
    var number = (".menuitem").length;
    var px = number * 40 + 60;
    $($(".menuitem").get().reverse()).each(function(i, e) {
        $(this).delay(i*200).animate({left: px}, 1000, 'linear');
        px=px-80;
    });
});