JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<a href="#" id="button">ABI <span>12/19</span></a>
</body>

CSS

#button {
height: 60px;
width: 60px; /* 60 + 25 + 15 = 100 */
display: block;
text-decoration: none;
font-weight: 600;
background: #2A2C2B;
color: #0EBFE9;
position: absolute;
text-align: left;
border-radius: 5px 0 0 5px;
font-family: Segoe UI;
font-size: 40px;
padding-left: 25px;
padding-right: 15px;
}

#button:before {
left: 93px;
top: 10px;
z-index: 3;
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 20px solid #2A2C2B;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}

#button span {
top: 0;
color: #2A2C2B;
position: absolute;
z-index: 2;
height: 60px;
width: 155px; /* 155 + 25 = 180px */
background: #0EBFE9;
position: absolute;
left: 100px;
border-radius: 0 5px 5px 0;
padding-right: 25px;
text-align: right;
letter-spacing: 2px;
}