JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a href="#">Catering</a>
    </li>
</ul>

CSS

ul {
    margin: 20px;
}

li { 
    height: 20px;
    background: #000;
    float: left;
}

a {
    padding: 10px;
}

a:after {
    content: '';
    height: 0;
    position: absolute;
    border: 36px solid transparent;
    border-top-color: blue;
    top: 9%;
    left: 10%;
    margin-left: -39px;
}