JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
              <ul id="nav-main">
                <li><a href="#">Home</a><span></span></li>
                <li><a href="#">About</a><span></span></li>
                <li><a href="#">Get Fit</a><span></span>
                    <ul class="nav-secondary">
                      <li><a href="#">Exercise Library</a></li>
                      <li><a href="#">Find An Instructor</a></li>
                      <li><a href="#">Fitness Tools</a></li>
                    </ul>
                </li>
                <li><a href="#">Find An Instructor</a><span></span></li>
                <li><a href="#">Get Certified</a><span></span></li>
              </ul>
            </div>

CSS

#nav-main li {
    margin:0;
    padding:5px;
    position: relative;
    display: block;
    float: left;
    margin-left: 10px;
}

#nav-main li a {
      color: #97dd6e;
      font-size: 1.1em;
      text-decoration: none;
     text-align: center;
     margin-right: -7px;
     line-height: 19px;
     z-index: 99;
}

#nav-main li span {
    height: 28px;
    background: red;
    display: block;
    margin: -22px -5px 0 2px;
    padding: 3px 0 0 0;
    z-index: 98;
    
    opacity: 0;
    visibility: hidden;        
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;    
}
#nav-main li:hover span {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;    
            
}
#nav-main li span:before, #nav-main li span:after {
    content: '';
    height: 28px;
    width: 7px;
    display: block;
    background: transparent url('/images/application/bg_nav_active_before.png') no-repeat left top;
    position: absolute;
    top: 2px;
    left: 0;
    z-index: 999;
}
#nav-main li span:after {
    background: transparent url('/images/application/bg_nav_active_after.png') no-repeat right top;
    left: 100%;
}