JSFiddle - React, Tailwind, and code Playground

HTML

<ul class = "menu">
    <li class = "menu-item">Item 1</li>
    <li class = "menu-item">Item 2</li>
    <li class = "menu-item">Item 3</li>
</ul>

CSS

.menu{
    list-style:none;
    padding: 0;
    margin: 0;
    background: #aad;
}

.menu-item{
    position: relative;
    padding: 1em;
    display: inline-block;
}

.menu-item:hover:after{
    content:'';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -.8em;
    border: .8em solid transparent;
    border-top-color: #aad;
}