JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
        <li class="menu-item"><a class="menu-item-link" href="#">Главная</a></li>
        <li class="menu-item"><a class="menu-item-link" href="#">Труверы</a></li>
        <li class="menu-item"><a class="menu-item-link" href="#">Помощь</a></li>
        <li class="menu-item menu-item-active"><a class="menu-item-link" href="#">Очень длинная ссылка</a></li>
    </ul>

CSS

.menu-item {
            float: left;
            margin: 0 8px;
            padding: 4px 8px;
            list-style: none;
        }
        .menu-item:hover {
            border: 1px #ccc solid;
            border-radius: 4px 4px 0 0;
            margin: 0 7px;
            background-image: linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
            background-image: -o-linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
            background-image: -moz-linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
            background-image: -webkit-linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
            background-image: -ms-linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);            
        }
        .menu-item-active {
            border: 1px #ccc solid;
            border-radius: 4px 4px 0 0;
            margin: 0 7px;
            background-image: linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
            background-image: -o-linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
            background-image: -moz-linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
            background-image: -webkit-linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
            background-image: -ms-linear-gradient(bottom, rgb(204,204,204) 18%, rgb(237,237,237) 80%);
        }
        .menu-item-link {
            font: 12px Tahoma;
            color: #39414d;
            text-decoration: none            
        }