JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li><a href="/home">Home</a></li>
<li class="selected"><a href="/about/">About</a><div class="arrow"></div></li>
<li><a href="/contact-us/">Contact Us</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/gallery/">Gallery</a></li>
<ul>

CSS

.arrow {
    width: 30px;
    height: 30px;
    background: #000;
    margin: -15px auto 0 auto;
    z-index: 1;
    -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
    -moz-transform: rotate(45deg);  /* FF3.5+ */
    -ms-transform: rotate(45deg);  /* IE9 */
    -o-transform: rotate(45deg);  /* Opera 10.5 */
    transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
    M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
    zoom: 1;
}
body {
font: 14px/22px Georgia, "Times New Roman", Times, Serif;
}

a {
color: #DA4B4B;
text-decoration: none;
}

a:hover {
color: #000;
}

ul {
list-style-type: none;
line-height: 50px;
}

li {
display: inline;
float: left;
}

li a {
display: block;
background: #ececec;
padding: 0 20px;
font-size: 18px;
border: 1px solid red;
    z-index: 2;
}

li a:hover {
background: #f2f2f2;
font-size: 20px;
}

.selected a{background:black; border: none; color: #fff; line-height: 25px; height: 52px; }