JSFiddle - React, Tailwind, and code Playground

by abude

HTML

<div class="nav-wrap">        
        <ul class="group" id="example-two">
            <li><a href="#">test1</a></li>
            <li><a href="#">test12</a></li>
            <li><a href="#">test13</a></li>
            <li class="current_page_item_two"><a href="#">test1444444</a></li>
            <li><a href="#">test14</a></li>
            <li><a href="#">test151</a></li>
            <li><a href="#">test123</a></li>
            <li><a href="#">test12</a></li>
        </ul>       
    </div>

CSS

#example-two { 
	margin: 0 auto; 
	list-style: none; 
	position: relative; 
	width: 960px; 
}
#example-two li { 
	display: inline-block; 
}
#example-two li a { 
	position: relative; 
	z-index: 200; 
	color: #bbb; 
	font-size: 14px; 
	display: block; 
	float: left; 
	padding: 6px 10px 4px 10px;
	text-decoration: none;
	text-transform: uppercase; 
}
#example-two #active-border { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100px; 
	/* background: #900; */ 
    border:1px solid red;
	z-index: 100; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.ie6 #example-two li, .ie7 #example-two li {
	display: inline;
}

JavaScript

$( document ).ready(function() {
    var $el, leftPos, newWidth;
    $mainNav2 = $("#example-two");    
    $mainNav2.append("<li id='active-border'></li>");    
    var $magicLineTwo = $("#active-border");
    
    $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 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")
        });    
    });
    
});