JSFiddle - React, Tailwind, and code Playground

by jontsk

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;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #232B30; /* old browsers */
    background: -moz-linear-gradient(top, #3D4850 3%,...