JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block-header__menu">
					<a href="#" class="block-header__menu-item block-header__menu-item--hover"><span class="block-header__menu-span" title="Home">Home</span></a>
					<a href="#" class="block-header__menu-item block-header__menu-item--hover"><span class="block-header__menu-span" title="Portfolio">Portfolio</span></a>
					<a href="#" class="block-header__menu-item block-header__menu-item--hover"><span class="block-header__menu-span" title="About">About</span></a>
					<a href="#" class="block-header__menu-item block-header__menu-item--hover"><span class="block-header__menu-span" title="Contact">Contact</span></a>
					<a href="#" class="block-header__menu-item block-header__menu-item--hover"><span class="block-header__menu-span" title="Blog">Blog</span></a>
				</div>

CSS

.block-header__menu{
	display: flex;
	margin-right: 13.15%;
  background-color: #fff;
}

.block-header__menu-item{
	text-decoration: none;
	color: #515862;
	font: 0.875rem "Ubuntu";
	margin-right: 17px;
	padding: 30px 12px;
	position: relative;
}

.block-header__menu-item:last-child{
	margin-right: 0px;
}

.block-header__menu-item--hover:hover{
	background-color: #12a3d6;
	border-bottom: 12px solid #0080b7;
	padding-bottom: 18px;
	font-weight: bold;
	color: #c5f4ff;
}

.block-header__menu-item--hover:hover:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 6px 6px 6px;
	border-color: transparent transparent #0080b7 transparent;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.block-header__menu-span:after{
	display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
}