JSFiddle - React, Tailwind, and code Playground

HTML

<div class="triangle">Content of arrow here</div>

CSS

.triangle::after{
    content: "";
    position:absolute;
    right:-10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 0 30px 10px;
    border-color: transparent transparent transparent #6ed2ad;
}

.triangle{
    position:relative;
    background:#6ed2ad;
    height:60px;
    line-height:60px;
    color:#fff;
    padding:0 30px;
    display:inline-block;
}