JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
			<header>
				<nav id="menu" class="align-center">
					<ul>
						<li class="active">
							<a href="javascript: void;" hreflang="en" title="HOMEPAGE"><span class="fa fa-fw fa-home"></span> HOMEPAGE</a>
						</li>
						<li>
							<a href="/blog/cast" hreflang="en" title="CAST"><span class="fa fa-fw fa-user"></span> CAST</a>
						</li>
						<li>
							<a href="/blog/search" hreflang="en" title="SEARCH"><span class="fa fa-fw fa-search"></span> SEARCH</a>
						</li>
						<li>
							<a href="/blog/other" hreflang="en" title="OTHER"><span class="fa fa-fw fa-external-link"></span> OTHER</a>
						</li>
					</ul>
					<div id="nav-border"></div>
				</nav>
			</header>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS

@import "https://fonts.googleapis.com/css?family=Open+Sans";
#menu, #menu ul, #menu ul li, #menu ul li a, #menu #menu-button {
    border: 0 none;
    box-sizing: border-box;
    display: block;
    line-height: 1;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: relative;
}
#menu::after, #menu > ul::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
#menu #menu-button {
    display: none;
}
#menu {
    background: #ffffff none repeat scroll 0 0;
    font-family: "Open Sans",sans-serif;
    line-height: 1;
    width: auto;
    margin: 20px 20px 0;
}
#menu-line {
    background: #009ae1 none repeat scroll 0 0;
    height: 3px;
    left: 0;
    position: absolute;
    transition: all 0.25s ease-out 0s;
}
#menu > ul > li {
    float: left;
}
#menu.align-center > ul {
    font-size: 0;
    text-align: center;
}
#menu.align-center > ul > li {
    display: inline-block;
    float: none;
}
#menu.align-center ul ul {
    text-align: left;
}
#menu.align-right > ul > li {
    float: right;
}
#menu.align-right ul ul {
    text-align: right;
}
#menu > ul > li > a {
    color: #000000;
    font-size: 16px;
    padding: 20px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s ease 0s;
}
#menu > ul > li:hover > a, #menu > ul > li.active > a {
    color: #009ae1;
}
#menu > ul > li.has-sub > a {
    padding-right: 25px;
}
#menu > ul > li.has-sub > a::after {
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    content: "";
    height: 4px;
    position: absolute;
    right: 10px;
    top: 23px;
    transform: rotate(45deg);
    transition: border-color 0.2s ease 0s;
    width: 4px;
}
#menu > ul > li.has-sub:hover > a::after {
    border-color: #009ae1;
}
#menu ul ul {
    left: -9999px;
    position: absolute;
}
#menu li:hover > ul {
    left: auto;
}
#menu.align-right li:hover > ul {
    right: 0;
}
#menu ul ul ul {
 ...

JavaScript

"use strict";
    var menu = $("#menu");
    menu.append("<div id=\"menu-line\"></div>");

    var foundActive = false;
    var activeElement;
    var linePosition = 0;
    var menuLine = $("#menu #menu-line");
    var lineWidth;
    var defaultPosition;
    var defaultWidth;

    $("#menu > ul > li").each(function () {
        if ($(this).hasClass("active")) {
            activeElement = $(this);
            foundActive = true;
        }
    });

    if (foundActive === false) {
        activeElement = $("#menu > ul > li").first();
    }

    defaultWidth = lineWidth = activeElement.width();

    defaultPosition = linePosition = activeElement.position().left;

    menuLine.css("width", lineWidth);
    menuLine.css("left", defaultPosition);

    $(window).scroll(function () {
        if ($(this).scrollTop() > 62) {
            menu.addClass("f-nav");
            menuLine.css("left", defaultPosition + 20);
        } else {
            menu.removeClass("f-nav");
            menuLine.css("left", defaultPosition);
        }
    });

    $("#menu > ul > li").hover(function () {
        activeElement = $(this);
        lineWidth = activeElement.width();
        linePosition = activeElement.position().left;
        menuLine.css("width", lineWidth);
        menuLine.css("left", linePosition);
    }, function () {
        if (menu.hasClass("f-nav")) {
            menuLine.css("left", defaultPosition + 20);
        } else {
            menuLine.css("left", defaultPosition);
        }
        menuLine.css("width", defaultWidth);
    });