JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu black">teste
    <div class="menu-arrow menu-arrow-right"></div>
</div>
<div class="menu green">teste
    <div class="menu-arrow menu-arrow-right"></div>
</div>

CSS

.menu {
    position: relative;
    width: 200px;
    color: white;
    padding: 5px;
   -webkit-transition: all .1s linear;
}
.menu.black { background-color: #000; }
.menu.green { background-color: green; }
.menu-arrow {
    position: absolute;
    width: 0 !important;
    height: 0 !important;
    border: 15px solid transparent;
    _border: 5px solid pink; /* IE6 */
    _filter: chroma(color=pink); /* IE6 */
    line-height: 0 !important;
    font-size: 0 !important;
    overflow: hidden !important;
}
.menu-arrow-right {
    right: -30px;
    bottom: 0%;
}
.menu.black .menu-arrow {
    border-left-color: #000;
}
.menu.green .menu-arrow {
    border-left-color: green;
}

.menu:hover {
    width: 210px;
}