JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="guideList">
            <li><a>Consulting</a></li>
            <li class="active">Law<span class="activePointer"></span></li>
            <li><a>Finance</a></li>
            <li><a>Technology</a></li>
            
        </ul>

CSS

.guideList{
	font-size: 12px;
	line-height: 12px;
	font-weight: bold;
	list-style-type: none;
	margin-top: 10px;
    width: 125px;
}

.guideList li{
	padding: 5px 0px 5px 10px;
}

.guideList .active{
	background-color: #0390d1;
	color: white;
}

.guideList .activePointer{
	margin-top: -5px;
	margin-bottom: -5px;
	float: right;
	display: inline-block;
	width: 0px;
	height: 0px;
	border-top: 11px solid white;
	border-left: 11px solid transparent;
	border-bottom: 11px solid white;
}