JSFiddle - React, Tailwind, and code Playground

HTML

<span class="arrow-ico"></span>

CSS

.arrow-ico {
	position: relative;
	
	display: inline-block;
	width: 30px;
}

.arrow-ico:before,
.arrow-ico:after {
	position: absolute;
	
	content: '';
}

.arrow-ico:before {
	top: calc(50% - 1px);
	left: 0;
	
	width: 100%;
	height: 2px;
	
	background: #000;
}

.arrow-ico:after {
	top: calc(50% - 6px);
	left: calc(100% - 6px);
	
	border: 6px solid transparent;
	
	border-left-color: #000;
}