JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<ul class="menu">
	<li class="menu-item"><a href="#" class="menu-link">Почему</a></li>
	<li class="menu-item"><a href="#" class="menu-link">Чужие</a></li>
	<li class="menu-item"><a href="#" class="menu-link">Примеры</a></li>
	<li class="menu-item"><a href="#" class="menu-link">Работают</a></li>
	<li class="menu-item"><a href="#" class="menu-link">Блджад</a></li>
</ul>

CSS

html{
	font:16px sans-serif;
}
.menu{
	margin:0;
	padding:0;
	list-style:none;
	font-size:0;
}
.menu-item{
	display:inline-block;
}
.menu-link{
	position:relative;
	display:block;
	height:40px;
	padding:0 20px;
	font-size:1rem;
	line-height:40px;
	background:#555;
	color:#fff;
	text-decoration:none;
}
.menu-link:after{
	content:"";
	opacity:.7;
	position:absolute;
	top:0;
	right:0;
	left:0;
	height:0;
	border-radius:2px;
	background:#ccc;
	transition:.3s;
	-webkit-transition:.3s;
	-moz-transition:.3s;
	-ms-transition:.3s;
	-o-transition:.3s;
}
.menu-link:hover:after{
	height:5px;
}