JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top_menu">
        <ul>
            <li class="first"><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

#top_menu ul{
        margin:0;
        padding:0;
        border:0;
        outline:0;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3b216), color-stop(100%,#ffff4d));
        margin: 0 auto;
        -webkit-transform: skew(-15deg);
        display: inline-block;
    }
    #top_menu li{
        margin:0;
        padding:0;
        border:0;
        outline:0;
        height:30px;
        font: 12 Verdana, sans-serif;
        display: inline-block;
        line-height: 30px;
        border-left: 1px solid #F37D01;
        padding: 0 15px;
        margin-right:-5px;
    }
    #top_menu li.first{
        border-left:1px solid #FEC801;
    }
    #top_menu li a{
        text-decoration: none;
        color: #fff;
    }
    #top_menu li:hover{
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EE7901), color-stop(100%,#EFA731));
    }