JSFiddle - React, Tailwind, and code Playground

by Hastig Z

HTML

<div class="d-arrow">
    <div class="d-arrow-text">3</div>
</div>

CSS

.d-arrow {
    position: absolute;
    left: 46%;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 40px 30px 0px 30px;
    border-color: #CCCCCC transparent transparent transparent;
    /* background-color: red; */
}

.d-arrow-text {
    position: relative; 
    margin: -35px 0px 0px -7px;
    padding: 0px 0px 0px 0px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    font-size: 20px; 
    line-height: 20px;
    color: #000000;
    text-shadow: none;
}