JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
    <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>
    </ul>
</div>

CSS

body {
        background-color:#CCC;
        font-size:14px;
        font-family:Georgia, "Times New Roman", Times, serif;
}

.menu {
        margin:0 auto;
        width:900px;
        height:65px;
        padding: 0 30px;
        background-color:black;
        text-align: justify;
        line-height: 0;
        border-radius: 10px;
}

.menu ul:after {
        width: 100%;
        display:inline-block;
        content: '';
}

.menu li {
        display:inline-block;
        list-style:none;
        vertical-align: middle;
}

.menu a {
        display:block;
        color:#FFF;
        text-decoration:none;
        font-size:16px;
        line-height: 25px;
        margin: 17px 10px;
        padding:3px;
        border-radius: 3px;
}


.menu a:hover {
        background: white;
        color: black;
}