JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="access" role="navigation">
            <div class="menu">
                <ul>
                    <li class="page_item page-item-7">
                        <a href="#"><span class="menu-text">menu 1</span></a>
                        <ul class="children">
                            <li class="page_item page-item-573">
                                <a href="#"><span class="menu-text">menu 1.1 this link is long!</span></a>
                            </li>
                            <li class="page_item page-item-575">
                                <a href="#"><span class="menu-text">menu 1.2</span></a>
                            </li>
                        </ul>
                    </li>

                    <li>
                        <a href="#" title="Home"><span class="menu-text">link</span></a>
                    </li>
                    <li>
                        <a href="#" title="Home"><span class="menu-text">link</span></a>
                    </li>
                    <li>
                        <a href="#" title="Home"><span class="menu-text">link</span></a>
                    </li>

                    <li>
                        <a href="#" title="Home"><span class="menu-text">link</span></a>
                    </li>
                    <li class="page_item page-item-9">
                        <a href="#">
                        <span class=
                        "menu-text">menu 2</span></a>
                        <ul class="children">
                            <li class="page_item page-item-579">
                                <a href="#"><span class="menu-text">menu 2.1another long one</span></a>
                            </li>
                            <li class="page_item page-item-581">
                                <a href="#"><span class="menu-text">menu 2.2</span></a>
                            </li>
           ...

CSS

#access {
    background:#fff;
    height:48px;
}
#access .menu ul {
    padding:0;
    margin:0;
}
#access .menu ul li {
    list-style-type:none;
    margin-right:10px;
}
/* main navigation bar */
#access .menu > ul > li {
    float:left;
}
#access .menu ul > .page_item {
    margin-left:25px;
}
/* basic link style */
#access .menu a, #access .menu a:visited {
    color:#32383d;
    text-decoration:none;
    font-family:"Trebuchet MS", Verdana, Helvetica, Arial;
    font-size:15px;
    text-transform:uppercase;
    display:block;
    overflow: hidden;
    min-height: 48px;
}
/* selected page */
#access .menu ul li.current_page_item > a,
#access .menu li.current_page_parent > a {
    font-weight:bold;
}

#access .menu-text {
    padding-top: 12px;
    border-bottom: 3px solid #fff;
    padding-bottom: 4px;
    float: left;
}

#access .current_page_item > a .menu-text,
#access .current_page_parent > a .menu-text {
    border-bottom: 3px solid #0687CA;
}

html>/**/body #access .current_page_item > a:hover .menu-text,
html>/**/body #access .current_page_parent > a:hover .menu-text {
    border-bottom: 3px solid #0687CA;
}

#access .children .current_page_item > a .menu-text,
#access .children .current_page_parent > a .menu-text {
    border-bottom: 3px solid #fff;
}

#access .children .current_page_item > a:hover .menu-text,
#access .children .current_page_parent > a:hover .menu-text {
    border-bottom: 3px solid #d9dfe1;
}

/* link hover style */
#access a:hover .menu-text {
    border-bottom-color: #d9dfe1;
}
/* subnav */
#access .menu ul.children {
    position:absolute;
    background:#fff;
    border:1px solid #ccc;
    border-top:none;
    margin-left:-10px;
    padding-bottom:10px;
}
#access .menu li:hover ul {
    display:block;
}
#access .menu ul.children li {
    position: relative;
    margin: 0;
}
#access .menu li.current_page_parent .children {
    font-weight:normal;
}
#access .menu ul.children a {
    min-height: 38px;
    display: block;
   ...