JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn"><span class="left">ABI</span><span class="right">| 12/19</span></div>

CSS

.btn{
    position: relative;
    border-radius: 10px;
    display: table;
    font-size: 35px;
    font-family: Verdana, sans-serif;
    width: 280px;
    height: 60px;
    background: #2a2c2b;
background: -moz-linear-gradient(left,  #2a2c2b 0%, #2a2c2b 35%, #0ebfe9 35%, #0ebfe9 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2a2c2b), color-stop(35%,#2a2c2b), color-stop(35%,#0ebfe9), color-stop(100%,#0ebfe9));
background: -webkit-linear-gradient(left,  #2a2c2b 0%,#2a2c2b 35%,#0ebfe9 35%,#0ebfe9 100%);
background: -o-linear-gradient(left,  #2a2c2b 0%,#2a2c2b 35%,#0ebfe9 35%,#0ebfe9 100%);
background: -ms-linear-gradient(left,  #2a2c2b 0%,#2a2c2b 35%,#0ebfe9 35%,#0ebfe9 100%);
background: linear-gradient(to right,  #2a2c2b 0%,#2a2c2b 35%,#0ebfe9 35%,#0ebfe9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a2c2b', endColorstr='#0ebfe9',GradientType=1 );

}

.left{
    position: relative;
    padding-left: 25px;
    color: #0ebfe9;
    display: table-cell;
    width: 100px;
    vertical-align: middle;
}

.right{
    color: #2a2c2b;
    display: table-cell;
    width: 180px;
    vertical-align: middle;
    padding-left: 14px;
    padding-right: 25px;
}

.left:after
{
    content: '';
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #2a2c2b;
    position: absolute;
    left:90px;
}