JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="navlist">
                <li><a href="#">Get a Quote</a></li>
                <li><a href="#">Learn about Life Insurance</a></li>
                <li><a href="#">Our Company</a></li>
</ul>

CSS

#navlist li {
    line-height:40px;
    display:inline;
    list-style-type: none;
    margin-right: 20px;
}
#navlist li a {
    height:30px;
    padding:3px 5px 3px 5px;
    color:#26627f;
    position: relative;
    text-decoration:none;
}
#navlist li a:hover {
    background:#035173;
    border-radius:3px;
    color:#fff;
    -moz-box-shadow:    0 3px 3px 0 rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,0.1);
    box-shadow:         0 3px 3px 0 rgba(0,0,0,0.1);
    transition: background .50s ease-in-out;
    -moz-transition: background .50s ease-in-out;
    -webkit-transition: background .50s ease-in-out;
}

#navlist li:hover a::after,
#navlist li a:hover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 0 0 0 -10px;
    border: 10px solid transparent;
    border-top-color: #035173;
    transition: border .25s ease-in-out;
    -moz-transition: border .25s ease-in-out;
    -webkit-transition: border .25s ease-in-out;
}