JSFiddle - React, Tailwind, and code Playground
HTML
<div class="body_middle">
<div id="right_menu">
<div class="product_top">
<h4>Apple iPad 2</h4>
</div><!-- end product_top -->
<div class="product_middle">
</div><!-- end product_middle -->
<div class="product_bottom">
</div><!-- product_bottom -->
</div><!-- end right_menu -->
<div id="left_menu">
<div id="search_top">
<h4>Форма поиска</h4>
</div><!-- end search_top -->
<div id="search_middle">
<form>
<input type="text" name "brand" value="Марка"></input>
<input type="text" name "product" value="Продукт"></input>
<span style="padding-right: 8px;"><input type="submit" value="Искать"></input></span>
</form><!-- end form search -->
...
CSS
/* Left menu */
#left_menu {
float: left;
}
#left_menu #search_top {
width: 310px;
height: 44px;
background: url(../images/search_top.png) 0 0 no-repeat;
}
#left_menu #search_middle {
width: 310px;
background: url(../images/search_middle.png) 0 0 repeat-y;
}
#left_menu #search_bottom {
width: 310px;
height: 4px;
background: url(../images/search_bottom.png) 0 0 no-repeat;
}
#search_top h4 {
color: #f7841d;
font-weight: bold;
padding-top: 5px;
}
.menu_name {
width: 310px;
height: 42px;
background: url(../images/menu_name.png) 0 0 no-repeat;
}
.menu_name h4 {
padding-top: 11px;
color: #4e4e4e;
font-size: 16px;
}
/* Right menu */
#right_menu {
float: right;
}
#right_menu .product_top {
width: 305px;
height: 30px;
background: url(../images/header_product.png) 0 0 no-repeat;
}
.product_top h4 {
color: #000;
font-size: 14px;
padding-top: 8px;
font-weight: bold;
}
#right_menu .product_middle {
width: 305px;
background: url(../images/middle_product.png) 0 0 repeat-y;
}
#right_menu .product_bottom {
width: 305px;
height: 128px;
background: url(../images/bottom_product.png) 0 0 no-repeat;
}