JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div clss="container">
        <ul class="main-menu">
            <li><a href="/">АКЦИИ</a>

            </li>
            <li><a href="/">ЛИЧНЫЙ КАБИНЕТ</a>

            </li>
            <li><a href="/">ПОМОЩЬ</a>

            </li>
            <li><a href="/">КОНТАКТЫ</a>

            </li>
            <li><a href="/">ЧАТ <span>24/7 ON-LINE</span></a>

            </li>
        </ul>
    </div>
</body>

CSS

body {
    margin:0;
    padding:10px;
    width:100%;
    background: black;
}
.container {
    width: 1000px;
    background:#eee6fa;
    overflow:hidden;
    margin: 0 auto;
}
.main-menu {
    width: 100%;
    background: linear-gradient(to top, #eacf02, #c09a02);
    overflow: hidden;
    margin:0 auto;
}
.main-menu li {
    width: 20%;
    padding: 10px 0;
    float: left;
    list-style: none;
    text-align: center;
    background-image: url(images/line-menu.png) no-repeat left center;
}
.main-menu li a {
    text-decoration: none;
    font:bold 1em Courier, sans-serif;
    color: #553a00;
}
.main-menu li a:hover {
    opacity: 0.7;
}
.main-menu li span {
    font:bold 13px Courier, sans-serif;
}