JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="hor">
	    <li><a href="#">Lorem</a></li>
	    <li><a href="#">Ipsum</a></li>
	    <li class="selected"><a href="#">Sit amet</a></li>
	    <li><a href="#">Consectetur</a></li>
	</ul>
<br>
	<ul class="ver">
	    <li><a href="#">Lorem</a></li>
	    <li><a href="#">Ipsum</a></li>
	    <li class="selected"><a href="#">Sit amet</a></li>
	    <li><a href="#">Consectetur</a></li>
	</ul>

CSS

ul.hor {
    border-bottom:3px solid blue
}
ul li {
    display:inline-block;position:relative
}
ul li a {
    display:block;padding:10px 15px;
}
ul li.selected a {
    color:green
}

ul li.selected:after {
    content:"";
    width:12px;
    height:12px;
    position:absolute;
    background:#fff;
    border-top:3px solid blue;
    border-right:3px solid blue;
}
ul.hor li.selected:after {
    left:0;right:0;bottom:-8px;margin:0 auto;
    -moz-transform:rotate(315deg);
    -webkit-transform:rotate(315deg);
    -ms-transform:rotate(315deg);
}
ul.ver li.selected:after {
    right:-8px;
    top:50%;
    margin-top:-6px;
    -moz-transform:rotate(225deg);
    -webkit-transform:rotate(225deg);
    -ms-transform:rotate(225deg);
}
ul.ver {
    width:200px;border-right:3px solid blue
}
ul.ver li {
    display:block;
}
ul.ver li a {
    display:block;padding:10px 15px;
}


body {
    width:90%;margin:20px auto;
    background: rgb(229, 180, 230);
background: -moz-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(120deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);

}