JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<div id="header">
    <div class="top_menu_area">
        <div class="logo_head_bot"></div>
        <div class="top_menu">
            <div class="top_menu_sections"> <a style="color:#cfd4d9" href='/' class='button_top_menu'>меню 1</a>
 <a style="color:#cfd4d9" href='/' class='button_top_menu'>меню 2</a>
 <a style="color:#cfd4d9" href='/' class='button_top_menu'>меню 3</a>
 <a style="color:#cfd4d9" href='/' class='button_top_menu'>меню 3</a>
 <a style="color:#cfd4d9" href='/' class='button_top_menu'>меню 4</a>

            </div>
            <div class="top_menu_section_content">
                <div class="top_menu_section_active_content"></div>
            </div>
        </div>
    </div>
</div>

CSS

#header {
    margin-left:5px;
    margin-right:5px;
    display:block;
    width:1014px;
    height:155px;
}
.top_menu_area {
    float:left;
    width:1014px;
    height:150px;
    background:#325D78;
    margin-bottom:5px;
}
.top_menu {
    margin-top:5px;
    margin-left:5px;
    width:506px;
    height:140px;
    background:#333F47;
    border: solid 1px #416982;
}
.top_menu_sections {
    position:relative;
    margin-top:5px;
    margin-left:5px;
    margin-bottom:5px;
    float:left;
    width:188px;
    height:140px;
}
.top_menu_section_content {
    float:right;
    margin-right:1px;
    width:310px;
    height:130px;
    
}
.top_menu_section_active_content {
    margin-top:5px;
    margin-left:4px;
    margin-right:4px;
    margin-bottom:5px;
    width:302px;
    height:130px;
}
.logo_head_bot {
    position:absolute;
    width:216;
    height:150px;
    opacity:0.5;
    background:url(../images/logotip_bot.png)no-repeat scroll 0% 0% transparent;
}
.top_menu_section_active_content {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #20282D;
    /* old browsers */
    background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%);
    /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #20282D), color-stop(51%, #252E34), color-stop(100%, #222A30));
    /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#20282D', endColorstr='#222A30', GradientType=0);
    /* ie */
    -moz-box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
    /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
    /* Safari, Chrome */
    box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
    /* CSS3 */
}
.button_top_menu {
    outline: 0;
    padding: 4px 11px;
    display: block;
    color: #9fa8b0;
    opacity:0.9;
    font-weight: bold;
    text-shadow: 1px 1px #1f272b;
    border: 1px solid #1c252b;
    border-radius: 3px;
...