JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="row mainnav">
    <div class="large-7 large-centered columns show-for-medium-up">
        <div class="small-3 columns"> <a href="#">Work</a>

        </div>
        <div class="small-3 columns"> <a href="#">About</a>

        </div>
        <div class="small-3 columns"> <a href="#">Contact</a>

        </div>
        <div class="small-3 columns"> <a href="#">Blog</a>

        </div>
    </div>
</nav>

CSS

.mainnav a {
    font-family:"Quicksand", Verdana, sans-serif;
    color: #8cc63f;

    font-size: 1.75em;
}
.mainnav a:hover {
    color: #c97932;
}
.arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #c97932;
    margin: 25px auto;
    display: none;
}
.mainnav a, .mainnav a:hover{ text-decoration:none;}
.mainnav a:hover:after {
    display: block;
    position:relative;
    top:5px;
    width:100%;
    height:0;
    text-align:center;
    content : "\25B2";
    color:yellow;
}

.small-3.columns {float : left; margin:10px; padding:5px;    border-bottom:1px solid red;overflow:visible;}