JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
    <div class="nav-wrap">
        <ul class="group" id="example-one">
            <li class="current_page_item"><a href="#box1">Box1</a>
            </li>
            <li><a href="#box2">Box2</a>
            </li>
            <li><a href="#box3">Box3</a>
            </li>
            <li><a href="#box4">Box4</a>
            </li>
        </ul>
    </div>
    <div class="boxes" id="box1">
<a>Box1</a>	
    </div>
    <div class="boxes" id="box2">
<a>Box2</a>	
    </div>
    <div class="boxes" id="box3">
<a>Box3</a>	
    </div>
    <div class="boxes" id="box4">
<a>Box4</a>	
    </div>
</div>

CSS

#page {
    width:960px;
    height:3000px;
}
.nav-wrap {
    margin: 5px auto;
    background-color:black;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
}
#example-one {
    margin: 0 auto;
    list-style: none;
    position:fixed;
    width: 960px;
    z-index:1;
}
#example-one li {
    display: inline;
    float: left;
}
#example-one li a {
    color: #bbb;
    font-size: 14px;
    display: block;
    padding: 6px 10px 4px 10px;
    text-decoration: none;
}
#example-one li a:hover {
    color: white;
}
#magic-line {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100px;
    height: 2px;
    background: #fe4902;
}
.boxes {
    height:300;
    padding-bottom:500px;
    width:100%;
    position:relative;
    float:left;
    z-index:0;
}

JavaScript

$(document).ready(function () {
    magicline();
});

function magicline() {

    var $el, leftPos, newWidth,
    $mainNav = $("#example-one");
    $("#magic-line").remove();
    $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 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")
        });
    });
}
$('li a').on('click', function () {
    $('li').each(function () {
        $(this).removeClass('current_page_item');

    });
    $(this).parent().addClass('current_page_item');
    magicline();
});

var loc = window.location.pathname.split('/')[1];
$('.group a[href='+ loc +']').parent().addClass('current_page_item')