JSFiddle - React, Tailwind, and code Playground

HTML

<div>i</div>

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    padding: 50px;
}
div {
    background: #1589A1;
    padding: 20px;
    position: relative;
    color: #fff;
    width: 100px;    
    min-height: 70px;
    font: 600 16px sans-serif;
    color: #fff;
    outline: solid 1px  #000;
}
div:after {
    content:'';
    position: absolute;
    left: 50%;
    bottom: -100px;
    border: 50px solid transparent;
    border-top: 50px solid #1589A1;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
div span{
    padding: 30px 0 30px;
    position: relative;
    display: block;
    z-index: 1;
    -webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}