JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rent-sale">RENT</div>

CSS

.rent-sale {
background-color: #02344A;
color: #fff;
font-size: 16px;
padding: 3px 3px;
position: absolute;
left: 10px;
word-wrap: break-word;
width: 16px;
text-transform: uppercase;
text-align: center;
bottom: 115px;
line-height: 16px; /* тут задается высота строки, а в нашем случае это отступы между буквами в вертикальном положении */
}
.rent-sale:before { 
content: ""; 
position: absolute; 
bottom: -11px; 
left: 0; 
width: 0; 
height: 0; 
border-left: 11px solid transparent; 
border-right: 11px solid transparent;     
border-top: 11px solid #02344a;     
} 
.rent-sale:after { 
content: ""; 
position: absolute; 
bottom: -4px; /* тут меняешь значение и выравниваешь положение круга по высоте */
left: 9px; /* тут меняешь значение и выравниваешь положение круга по ширине */
width: 4px; 
height: 4px; 
-moz-border-radius: 2px; 
-webkit-border-radius: 2px; 
border-radius: 2px; 
background: #fff; 
}