JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav-wrap">
    <ul class="group" id="nav-links">
        <li class="current_page_item"><a href="#recent" class="linkclass recent">RECENT</a></li>
        <li><a href="#work" class="linkclass work">WORK</a></li>
        <li><a href="#who" class="linkclass who">WHO</a></li>
        <li><a href="#services" class="linkclass services">SERVICES</a></li>
        <li><a href="#contact" class="linkclass contact">CONTACT</a></li>
    </ul>
</div>

CSS

#nav-links ul { position: relative; }
#nav-links li { float: left; display: block; padding: 0 10px; height: 25px; text-align: center; position: relative; z-index:2; }
#nav-links li a { color: #800; text-decoration: none; }
#nav-links li#magic-line { border-bottom: 2px solid #ff0; position: absolute; z-index: 1; }

JavaScript

$(function() {
     var $el, leftPos, newWidth,
        $mainNav = $("#nav-links");

     $mainNav.append("<li id='magic-line'></li>");
     var $magicLine = $("#magic-line");

     $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

     $("#nav-links li:not('#magic-line') a").hover(function() {
        $el = $(this).parent();
        leftPos = $el.position().left;
        newWidth = $el.width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
     },function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
     }).click(function() {
         $mainNav.find('li').removeClass('current_page_item');
         $(this).parent().addClass('current_page_item');
         $magicLine
            .data("origLeft", $magicLine.position().left)
            .data("origWidth", $magicLine.width());
     });
});