JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/css/foundation.min.css">
<div class="row mainNav">
  <nav>
    <ul>
        <li>Parent 1</li>
        <li class="mainSelected">Parent 2</li>
        <li>Parent 3</li>
    </ul>
  </nav>
</div>

<div class="row subNav">
  <nav>
    <ul>
      <li class="subSelected">Child 1</li>
      <li>Child 2</li>
      <li>Child 3</li>
    </ul>
  </nav>
</div>

CSS

.mainNav { background-color: #525051; color:white; }
.subNav { background-color:#95A9C2; color:black; }

ul { list-style:none; }
ul:after { content:"";display:table;clear:both; }
ul li { float: left; margin-right:2.0rem;}

.mainSelected {    
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 10px solid #95A9C2; 
    text-align:center;
}

.subSelected {    
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 10px solid #fff; 
    text-align:center;
}