JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button">
    <div class="top-side"></div>
    <div class="arrow-right"></div>
    <div class="arrow-right2"></div>
    <div class="bottom-side"></div>
</div>

CSS

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	
	border-left: 15px solid white;
    position:absolute;
    /*margin-top:1px;*/
    /*outline:blue dotted thick;*/
}
.arrow-right2 {
	width: 0; 
	height: 0; 
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	
	border-left: 15px solid blue;
    margin-left:2px;
    /*outline:blue dotted thick;*/
}
.button{
width: 400px;
    background-color:orange;
}
.top-side{
height:7px;
    width:2px;
    background-color:blue;
}
.bottom-side{
height:7px;
    width:2px;
    background-color:blue;    
}