JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav-primary" class="nav"><nav>
    <div class="menu">
        <ul>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
        </ul>
    </div>
</nav></div><!--#nav-primary-->

CSS

ul li { display: inline-block; margin-top: 10px; }

#nav-primary ul li:nth-child(1) a {
        border-top: 5px solid #144201;
    }
#nav-primary ul li:nth-child(2) a {
    border-top: 5px solid #82481a;
}
#nav-primary ul li:nth-child(3) a {
    border-top: 5px solid #181949;
}