JSFiddle - React, Tailwind, and code Playground

HTML

<div class="l-menu">
					<h1>Навигация по сайту</h1>
					<ul>
						<li><a href="#">Беременность</a></li>
						<li><a href="#">Биографии</a></li>
						<li><a href="#">Воспитание</a></li>
						<li><a href="#">Гадания</a></li>
						<li><a href="#">Гороскопы</a></li>
						<li><a href="#">Дети</a></li>
						<li><a href="#">Диеты</a></li>
						<li><a href="#">Дом & быт</a></li>
						<li><a href="#">Друзья</a></li>
						<li><a href="#">Звезды</a></li>
						<li><a href="#">Карьера</a></li>
						<li><a href="#">Красота & здоровье</a></li>
						<li><a href="#">Любовь</a></li>
						<li><a href="#">Макияж</a></li>
						<li><a href="#">Маски</a></li>
						<li><a href="#">Мода & стиль</a></li>
						<li><a href="#">Новости</a></li>
						<li><a href="#">Общество</a></li>
						<li><a href="#">Одежда</a></li>
					</ul>
				</div>

CSS

.l-menu {
	display:block;
	width:200px;
	background:#f5f6f8;
    font-size:14px;
}
.l-menu ul {
	padding:0;
	margin:0;
	list-style:none;
}
.l-menu li {
	display:block;
	padding:5px 15px;
	margin-bottom:2px;
}
.l-menu li a {
	color:#77b0c4;
	text-decoration:none;
	line-height: 1.05em;
	display: inline-block;
	border-bottom: 1px solid #77b0c4;
	text-transform: uppercase;
}
.l-menu li:hover {
	background: #f5929a;
    background: linear-gradient(to top, #e44f76, #f6989d);
	color:white;
	border-radius:8px; 
	padding:4px 0 4px 10px;
	width:180px;
	border-bottom:none;
	margin-left:5px;
}
.l-menu li:hover a {
	color:white;
	border-bottom:none;
}