JSFiddle - React, Tailwind, and code Playground

by Tiago Marinho

HTML

<div class="wrapper">
<div class="black"></div>
<div class="triangle"></div>
</div>

CSS

.wrapper{
    position:relative;
    width:50px;
}
.black{
    background:black;
    width:50px;
    height:25px;
}
.triangle {
    position:absolute;
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid black;
	border-bottom: 0px solid transparent;
    left:50%;
    margin-left:-5px;
}