JSFiddle - React, Tailwind, and code Playground

HTML

<div style="background-color:#999999;margin-bottom:20px;">
    <div class="activeHeader h4Bold" style="width:40%;display:inline-block">
        <span class="h3Bold" style="color:#ffffff!important">1</span>
        Define 
    </div>

    <div class="inactive h4Bold" style="width:40%;display:inline-block">
        <span class="h3Bold" style="margin-right:12px;color:#000000!important">2</span> 
    </div>
</div>

CSS

.activeHeader {
    padding:9px 24px 9px 12px;
    background-color:#000000;
    color:#ffffff;
    position:relative;
    line-height: 18px;
    font-size: 18px;
    height: 18px;
}

.activeHeader:after{
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0; 
	height: 0; 
	border-top: 18px solid transparent;
	border-bottom: 18px solid transparent;
	border-left: 18px solid black;
}

.inactive {
    padding:9px 24px 9px 12px;
    background-color:#cccccc;
    color:#000000;
}