JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
				<ul>
					<li class = "nav-item active">
						<a href = "#" class = "nav-item-link">Главная</a>
					</li>
					<li class = "nav-item">
						<a href = "#" class = "nav-item-link">О продуктах</a>
					</li>
					<li class = "nav-item">
						<a href = "#" class = "nav-item-link">Безопасность</a>
					</li>
					<li class = "nav-item">
						<a href = "#" class = "nav-item-link">Заказать</a>
					</li>
					<li class = "nav-item">
						<a href = "#" class = "nav-item-link">Контакты</a>
					</li>
				</ul>
			</nav>

CSS

body,html{
	margin: 0px;
	padding: 0px;
	height: 100%;
	font-size: 62.5%;
	font-family: Tahoma, serif;
}

nav{
		float: right;
		margin-top: 38px;
		margin-right: 63px;
		padding: 10px 0px;
	}
	
		nav .nav-item{
			float: left;
			list-style: none;
			margin-left: 32px;
			font-size: 2.8em;
			padding: 4px 0px;
			position: relative;
		}
			nav .nav-item:hover, nav .active{
				background: #f1f1f1;
			}
			
			nav .nav-item-link{
				color: #5a5a5a;
				text-decoration:none;
			}
			
			nav .nav-item:hover:before, nav .nav-item.active:before{
				content: "";
				position: absolute;
				border: 15px solid;
				border-color: transparent #f1f1f1 transparent transparent;
				top: 0px;
				left: -30px;
			}
			
			nav .nav-item:hover:after, nav .nav-item.active:after{
				content: "";
				position: absolute;
				border: 15px solid;
				border-color: transparent transparent transparent #f1f1f1 ;
				top: 0px;
				right: -30px;
			}