JSFiddle - React, Tailwind, and code Playground

HTML

<span class="btn"><span class="text">text button <i class="triangles"></i></span></span>

CSS

.btn{
        background: rgb(30,87,153);
    background: -moz-linear-gradient(left,  rgba(30,87,153,1) 0%, rgba(125,185,232,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
    background: -webkit-linear-gradient(left,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%);
    background: -o-linear-gradient(left,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%);
    background: -ms-linear-gradient(left,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%);
    background: linear-gradient(to right,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );
    display:inline-block;
    vertical-align: top;
    position: relative;
    padding: 10px;
    font-size:20px;
    line-height:18px;
}
.btn:after,
.btn:before{
    content:'';
    position: absolute;
    background:#fff;
    z-index:1;
    top:0;
    bottom:0;
    width: 7px;
}
.btn:after{
    left: 3px;
    top:10px;
    bottom:3px;
}
.btn:before{
    right: 3px;
    bottom:10px;
    top:3px;
}
.text:after,
.text:before{
    content:'';
    width:0;
	height:0;
    position: absolute;
    z-index:1;
	
}
.text:after{
    border-left:7px solid transparent;
	border-right:0 solid transparent;
	border-bottom:7px solid #fff;    
    bottom:0;
    right:0;
}
.text:before{
    border-left:0 solid transparent;
	border-right:7px solid transparent;
	border-top:7px solid #fff; 
    top:0;
    left:0;
}
.text{
    display: inline-block;
    vertical-align: top;
    padding: 13px 0;
    margin: -7px 0;
    background:#fff;
}
.triangles{
    
}
.triangles:after,
.triangles:before{
    content:'';
    width:0;
	height:0;
    position: absolute;
    z-index:1;
}
.triangles:after{
    border-left:7px solid transparent;
	border-right:0 solid transparent;
	border-bottom:7px solid #fff; 
    top:3px;
    left:3px;
}
.triangles:before{
   ...