JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
            <li><a href="" class="first">Главная страница</a></li>
            <li><a href="">О компании</a></li>
            <li><a href="">Услуги</a></li>
            <li><a href="">Популярное</a></li>
            <li><a href="" class="last">Контактная информация</a></li>
        </ul>

CSS

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

li{
float: left;

}


li a{
display:inline-block;
text-decoration:underline;
color:#000;
padding:0px 5px 2px 5px;
font-size:20px;
background: #ccc;
border: 1px solid black;
}

li a:hover{
text-decoration:none;
color:#fff;
background:#4472e8;
}

li:first-child a {
border-radius:10px 0px 0px 0px;
-moz-border-radius:10px 0px 0px 0px;
-webkit-border-radius:10px 0px 0px 0px;
}
li:last-child a {
border-radius:0px 10px 0px 0px;
-moz-border-radius:0px 10px 0px 0px;
-webkit-border-radius:0px 10px 0px 0px;
}