JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-xs-3 advantage grid-arrow">
        <div>
            Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
        </div>
   </div>

CSS

.col-xs-3 {
    width: 50%;
}
.grid-arrow {
    position: relative;
    text-align: center;
    background-color: red;
    line-height: 2em;
    border-top:300px solid #fff;
    top:-300px;
}
.grid-arrow::after {
    content: "";
    position: absolute;
    left: 0;
    background-color: red;
    padding-bottom: 50%;
    width:57.7%;
    z-index:-1;
    
    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
    
    -webkit-transform: rotate(-30deg) skewX(30deg);;
    -ms-transform: rotate(-30deg) skewX(30deg);
    transform: rotate(-30deg) skewX(30deg);
}