JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="main-menu">
					<li><a href="#" class="selected">PRODUCTS</a></li>
					<li><a href="#">IDEAS</a></li>
					<li><a href="#">BRANDS</a></li>
					<li><a href="#">GIFTS</a></li>
					<li><a href="#">STORES</a></li>
				</ul>

CSS

ul.main-menu{
	list-style: none;
	padding: 11px;
	border-bottom: 5px solid #f02b63;
}
ul.main-menu li{
	display: inline;
}
ul.main-menu li a{
    text-decoration: none;
    position: relative;
	color: #1d1d1d;
    margin-left: 10px;
	padding: 10px 46px 10px 14px;
	font-family: 'Arial Black', Gadget, sans-serif;
	font-size: 0.75em;
}
ul.main-menu li a:hover{
    color: #f02b63;
}
ul.main-menu li a:hover:after{
    display: block;
    position: absolute;
    bottom: -1px;
    left: 30%;
    width: 0px;
    height: 0px;
    content: "";
    border: 6px solid transparent;	
    border-bottom: 6px solid #f02b63;
}
ul.main-menu{
	background: #ffffff;
	color: #1d1d1d;
	padding: 10px 14px 10px 14px;
}