JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
    <body>
        <header class="main-header">
            <div class="main-header-layout container">
                <nav class="main-navigator">
                    <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>
                </nav>
                <div class="user-block">
                    <a class="login" href="#">Вход</a> 
                </div>
            </div>
        </header>
  </body>

CSS

.main-header {
    background: #000000;
    color: #ffffff;
}
.main-header-layout {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.main-navigator {
    width: 780px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.main-navigator a {
    color: #ffffff;
    text-decoration: none;
    display: block;
    padding: 25px 20px;
}
.main-navigator a:hover {
    background: #242424;
}

.main-navigator li {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    line-height: 20px;
    vertical-align: top;
}

.main-navigator ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;

}

.user-block {
    width: 140px;
}

.login {
    position: relative;
    color: #ffffff;
    display: inline-block;
    vertical-align: top;
    padding: 25px 20px;
    padding-left: 50px;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none;
}

.login::before {
    content: " ";
    position: absolute;
    top: 28px;
    left: 20px;
    width: 18px;
    height: 17px;
    background: transparent url("../img/icons.png") no-repeat -43px -16px;
    opacity: 0.3;
}

.user-block a:hover {
    background: #242424;
}
.login:hover::before {
opacity: 1;
}