JSFiddle - React, Tailwind, and code Playground

by kost

HTML

<ul>
    <li class="nav-menu-item-357 main-menu-item  menu-item-even menu-item-depth-0 new_dropdown_style menu-item menu-item-type-custom menu-item-object-custom">
        <a href="#" class="menu-link main-menu-link sf-with-ul">    
            <span>Issues</span>
         </a>
    </li>
</ul>

CSS

.sf-with-ul {
    position:relative;
    border: solid 1px #ccc;
    background: #333;
    padding: 10px 25px;
    color:#fff;
    text-decoration:none;
} 

.sf-with-ul:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -3px;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top-color: #DFEEFF;
    border-top-color: rgba(255, 255, 255, 0.5);
}

/*top menu issues*/
.nav-menu-item-357 .sf-with-ul span{
  color:#E81717;
}

.nav-menu-item-357 .main-menu-link.sf-with-ul:hover:after {
  border-top-color:#E81717;
}