JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <div class="container">
        
      <ul id="nav">
          <li><a href="#">Link <span class="fa fa-caret-down"></span></a>
              <ul id="sub-menu">
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
              </ul>
          </li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>

    </div>
  </nav>

CSS

nav {
        height: 70px;
        background: transparent;
      }
      nav ul {
        display: inline-block;
        list-style: none;
        height: 70px;
        float:right;
      }
      nav ul li {
        display: inline-block;
        background: transparent;
        float: left;
        padding: 0px 10px;
        padding-top: 23px;
        height: 43px;
        border-top: 4px solid $White;
      }
      nav ul li:first-child {
        border-top: 4px solid $White;
      }

      .active {
        border-color: $PrimaryOrange;
      }

      nav ul li a {
        font-family: 'Lato', serif;
        font-size: 14px;
        color: $TextColor;
        line-height: 122%;
        letter-spacing: 1.5px;
        padding-left: 0;
      }
      #nav-download a {
        background: $PrimaryOrange;
        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;
      }
      nav ul ul li {
        display: block;
      }
      nav ul ul li a {
        display: block;
      }