JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
        <div id="blok_menu">
            <div id="menu">
                <ul>
                    <li><a href="#"><span class="one">Пункт меню</span></a></li>
                    <li><a href="#">Пункт меню</a></li>
                    <li><a href="#">Пункт меню</a></li>
                    <li><a href="#"><span class="two">Пункт меню</span></a></li>
                </ul>
            </div>
                <div id="right_menu">
                    <a href="#">Надпись</a>
                </div>
        </div>
    </div><!-- #header-->

CSS

#header {
    height: 42px;
    width:100%;
    background-image:-webkit-gradient(linear, 0 0%, 0 100%, from(#383838), to(#000000));
    white-space: nowrap;
}

#blok_menu {
    height:47px;
    background-image:-webkit-gradient(linear, 0 0%, 0 100%, from(#43C846), to(#2CA32A));
    width:auto;
    float:left;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-color:#003062;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-left-color:#003062;
    border-left-style:solid;
    border-left-width:1px;
    border-right-color:#003062;
    border-right-style:solid;
    border-right-width:1px;
    border-top-color:#003062;
    border-top-style:solid;
    border-top-width:1px;
    box-shadow:#000000 0 0 4px;
    z-index:500;
}

#blok_menu li{
    float:left;
}

#blok_menu a{
    padding:0 10px;
    line-height:46px;
    font-family:'Droid Sans', Helvetica, Arial, sans-serif;
    font-size:15px;
    color:#fff;
    text-shadow:#000000 1px 1px 0;
    text-decoration:none;
}

#blok_menu a:hover{
    text-decoration:underline;
}

.one {
    margin-left:6px;
}

.two {
    margin-right:6px;
}


#right_menu {
    float:right;
}