JSFiddle - React, Tailwind, and code Playground

HTML

<div id="css2" class="container">
    <i></i>
    <div class="content"></div>
</div>

<div id="css3" class="container">
    <div class="content"></div>
</div>

CSS

html, body {
    margin:0
}
.container {
    height:60px;
    position: relative;
}
.content {
    float:right;
    margin: 0 0 10px;
    height: 50px;
    width: 150px;
    background: yellow;
}

/* CSS 2 */
#css2 i {
    position: absolute;
    right: 150px;
    border: solid 25px transparent;
    border-right-color: yellow;
} 

/* CSS 3 */
#css3 .content:before {
    content: "";
    position: absolute;
    right: 150px;
    border: solid 25px transparent;
    border-right-color: yellow;
}

/* The hover */
.container:hover {
    cursor: pointer;
}
.container:hover .content {
    background: green;
}
#css2:hover i, #css3:hover .content:before {
    border-right-color: green;
}