JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <div class="container">
        <ul id="nav">
            <li><a href="#">Link 1</a>

                <ul id="sub-menu">
                    <li><a href="#">Link 1.1</a>
                    </li>
                    <li><a href="#">Link 1..2</a>
                    </li>
                </ul>
            </li>
            <li class="active"><a href="#">Link 2</a>
            </li>
            <li><a href="#">Link 3</a>
            </li>
            <li><a href="#">Link 4</a>
            </li>
        </ul>
    </div>
</nav>

CSS

nav {
    height: 70px;
    background: transparent;
}
ul {
    list-style-type : none;
    margin: 0;
    padding: 0;
}
nav div>ul {
    display: inline-block;
    height: 70px;
    float:right;
}
nav ul>li {
    display: inline-block;
    background: transparent;
    padding: 0px 10px;
    padding-top: 23px;
    height: 43px;
    border-top: 4px solid white;
    position: relative;
}
nav ul> li:first-child {
    border-top: 4px solid white;
}
.active {
    border-color: orange;
}
nav ul li a {
    font-family:'Lato', serif;
    font-size: 14px;
    color: black;
    line-height: 122%;
    letter-spacing: 1.5px;
    padding-left: 0;
    white-space: nowrap;
}
#nav-download a {
    background: orange;
    color: white;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
    margin-left: 0;
}
nav ul ul {
    display: block;
    position: absolute;
    left: 0;
    bottom: -24px;
}
nav ul ul li {
    display: block;
    height: auto;
    padding: 0 10px;
}
nav ul ul li a {
    display: block;
}