JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main_nav" class="cp_fixed">
    <ul class="topnav">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About Us</a>
        </li>
        <li class="cp_current"><a href="#">Product</a> 
        </li>
         <ul>
            <li><a href="#">Product One</a>
            </li>
         </ul>
        <li><a href="#">Contact</a>
        </li>
    </ul>
</div>

CSS

#main_nav {
    width: 950px;
    margin: 20px 20px 0 19px;
    line-height: 32px;
}
ul.topnav ul {
    display:none
}
ul.topnav {
    background: #656565;
    border-radius: .3em .3em 0 0;
    width: 100%;
    border-radius: .3em .3em 0 0;
    text-shadow: 0.5px 0.5px 0.5px #000;
    font-size: 10.5px;
    text-transform: uppercase;
    font-weight: bold;
    font-variant: normal;
    float: left;
}
ul.topnav li {
    display:table;
    color: white;
    float:left;
}
ul.topnav li a {
    text-decoration:none;
    padding: 0 20px 0 20px;
}
ul.topnav li a:hover {
    background: #900;
}
ul.topnav li a:link {
    display:table;
    padding: 0 20px 0 20px;
    text-decoration: none;
}
ul.topnav li.cp_current {
    padding: 0;
}
ul.topnav li.cp_current a:link {
    padding: 0 20px 0 20px;
    line-height: 40px;
}
ul.topnav li.cp_current a {
    height: 3.3em;
    display: block;
    background: #fff;
    color: #656565;
    border-radius: .3em .3em 0 0;
    margin-top: -0.3em;
    cursor: default;
    border-left: solid #e2e2e2 1px;
    box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.5);
    text-shadow: none;
    background: #ffffff;
    /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0NSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top, #ffffff 45%, #e2e2e2 100%);
  ...

JavaScript

$(document).ready(function () {
    var str = location.href.toLowerCase();
    $(".topnav li a").each(function () {
        if (str.indexOf(this.href.toLowerCase()) > -1) {
            $("li.cp_current").removeClass("cp_current");
            $(this).parent().addClass("cp_current");

        }
    });

});