JSFiddle - React, Tailwind, and code Playground

HTML

<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>
        </ul>

CSS

ul{
list-style:none;
margin:0;
padding:0;
font-family:Tahoma;    
}

li{
display:inline-block;
}


li a{
display:block;
text-decoration:none;
color:#000;
padding:15px;
font-size:20px;
}

li a:hover{
text-decoration:none;
color:#fff;
background-image: linear-gradient(bottom, rgb(28,77,16) 0%, rgb(82,171,38) 54%);
background-image: -o-linear-gradient(bottom, rgb(28,77,16) 0%, rgb(82,171,38) 54%);
background-image: -moz-linear-gradient(bottom, rgb(28,77,16) 0%, rgb(82,171,38) 54%);
background-image: -webkit-linear-gradient(bottom, rgb(28,77,16) 0%, rgb(82,171,38) 54%);
background-image: -ms-linear-gradient(bottom, rgb(28,77,16) 0%, rgb(82,171,38) 54%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(28,77,16)),
    color-stop(0.54, rgb(82,171,38))
);
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;    
position:relative;
}