JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="arrow">
    <div class="inner-arrow">
        FLECHA
    </div>
</div>

CSS

.arrow {
    font-size: 0;
}
.inner-arrow {
	width:210px;
	height:40px;
    display: inline-block;
	background-color:#CBCBCB;
	text-align:center;
	font-size:20px;
	font-weight:bold;
	line-height:40px;
    vertical-align: middle;
}
.arrow:before,
.arrow:after {
	content:'';
    display: inline-block;
	width:0;
	height:0;
	border:20px solid transparent;
    vertical-align: middle;
}
.arrow:before {
	border-top-color: #CBCBCB;
	border-bottom-color: #CBCBCB;
	border-right-color: #CBCBCB;
}
.arrow:after {
	border-left-color: #CBCBCB;
}