JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav-wrap">
    <ul class="group" id="example-one">
        <li class="current_page_item"><a href="index.html">Home</a></li>
        <li><a href="bio.html">Biography</a></li>
        <li><a href="art.html">Art</a></li>
        <li><a href="visual.html">Visual </a></li>
        <li><a href="theories.html">Theories</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li style="float:right;"><a style="border:none;" href="#">Social Icon</a></li>
    </ul>
</div>

CSS

/** Navigation */
.nav-wrap { margin: 0px auto;  background-color: rgba(0,0,0,0.6); border-top: none; border-bottom: 2px solid white; }

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */

#example-one { margin: 0 auto; list-style: none; position: relative; width: 940px; font-family:Arial; }
#example-one li { display: inline; }
#example-one li a { color: #bbb; font-size: 14px; letter-spacing:2px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; border-right: 1px solid white; }
#example-one li:first-child a { border-left:1px solid white; }
#example-one li a:hover { color: white; }
#magic-line { position: absolute; bottom: -2px; left: 0; width: 150px; height: 2px; background: #ca1f7e; }

.current_page_item a, .current_page_item_two a { color: white}

JavaScript

$(function(){

var $el, leftPos, newWidth,
    $mainNav = $("#example-one"),
    $mainNav2 = $("#example-two");

/*
    EXAMPLE ONE
*/
$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());

$("#example-one li").find("a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();

    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });    
});


/*
    EXAMPLE TWO
*/
$mainNav2.append("<li id='magic-line-two'></li>");

var $magicLineTwo = $("#magic-line-two");

$magicLineTwo
    .width($(".current_page_item_two").width())
    .height($mainNav2.height())
    .css("left", $(".current_page_item_two a").position().left)
    .data("origLeft", $(".current_page_item_two a").position().left)
    .data("origWidth", $magicLineTwo.width())
    .data("origColor", $(".current_page_item_two a").attr("rel"));

$("#example-two li").find("a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLineTwo.stop().animate({
        left: leftPos,
        width: newWidth,
        backgroundColor: $el.attr("rel")
    })
}, function() {
    $magicLineTwo.stop().animate({
        left: $magicLineTwo.data("origLeft"),
        width: $magicLineTwo.data("origWidth"),
        backgroundColor: $magicLineTwo.data("origColor")
    });    
});
});