JSFiddle - React, Tailwind, and code Playground
HTML
<div class="main">
<div class="header">
<!-- <div class="header_text"></div> -->
<div class="header_left_shadow"></div>
<div class="header_right_shadow"></div>
<!-- *НАЧАЛО БЛОКА* Меню -->
<div class="header_menu" align="center">
<div class="header_menu_bg">
<div class="header_menu_bg_left"></div>
<div class="header_menu_bg_center">
<!-- *НАЧАЛО БЛОКА* Элементы меню -->
<div class="header_menu_elements">
<!-- *НАЧАЛО БЛОКА* Элемент меню №1 -->
<div class="header_menu_element">
<div class="header_menu_element_bg">
<div class="header_menu_element_bg_left"></div>
<div class="header_menu_element_bg_center">Home</div>
<div class="header_menu_element_bg_right"></div>
</div>
</div>
<!-- *КОНЕЦ БЛОКА* Элемент меню №1 -->
<!-- *НАЧАЛО БЛОКА* Разделитель элементов меню -->
<div class="header_menu_element_separator"></div>
<!-- *КОНЕЦ БЛОКА* Разделитель элементов меню -->
<!-- *НАЧАЛО БЛОКА* Элемент меню №2 -->
<div class="header_menu_element">
<div class="header_menu_element_bg">
<div class="header_menu_element_bg_left"></div>
<div class="header_menu_element_bg_center">Company</div>
<div class="header_menu_element_bg_right"></div>
</div>
</div>
<!-- *КОНЕЦ БЛОКА* Элемент меню №2 -->
...
CSS
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
height: 100%;
background-color: #f4f4f4;
}
a {
color: #3C3C3C;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
.clear{
clear:both;
}
.main{
background-color: #f4f4f4;
}
.header{
min-width: 1024px;
}
.header_left_shadow{
background:url(http://95.220.169.138/computer/images/header_shadow_l.png);
width: 512px;
height: 119px;
float:left;
}
.header_right_shadow{
background:url(http://95.220.169.138/computer/images/header_shadow_r.png);
width: 512px;
height: 119px;
float: right;
}
.header_menu{
width: 1000px;
clear:both;
margin: 0 auto;
}
.header_menu_bg{
position: relative;
z-index: 3;
height: 74px;
}
.header_menu_bg_left{
background:url(http://95.220.169.138/computer/images/header_menu_bg_left.png);
width:21px;
height: 68px;
float:left;
}
.header_menu_bg_center{
background:url(http://95.220.169.138/computer/images/header_menu_bg_center.png) repeat-x 0 -6px;
height: 74px;
min-width: 958px;
float: left;
}
.header_menu_bg_right{
background:url(http://95.220.169.138/computer/images/header_menu_bg_right.png);
width:21px;
height: 68px;
float:right;
}
.header_menu_elements{
position: relative;
z-index: 4;
height: 39px;
float:left;
margin-top:20px;
}
.header_menu_element{
float:left;
min-height: 39px;
}
.header_menu_element_bg{
min-width: 72px;
float:left;
margin: 0px 5px;
}
.header_search{
float:right;
position: relative;
margin-top:20px;
min-height: 39px;
}
.header_search_bg{
margin: 0px 5px;
z-index: 4;
...