JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main_menu">
    <div class="logo">
        <img src="img/logo.png" alt="" />
    </div>
    <div class="blue_menu">
        <span class="bmenu_item_sel"><a href="#buy" title="Купить жилье"><img src="img/butt/key.png" alt="" />Купить</a></span>
        <span class="bmenu_item"><a href="#rentGet" title="Снять жилье"><img src="img/butt/sandt.png" alt="" />Снять</a></span>
        <div class="clear"></div>
        <span class="bmenu_item"><a href="#sell" title="Продать жилье"><img src="img/butt/full_dollar.png" alt="" />Продать</a></span>
        <span class="bmenu_item"><a href="#rentGive" title="Сдать жилье"><img src="img/butt/part_dollar.png" alt="" />Сдать</a></span>
    </div>
    <div class="gray_menu">
        <span class="gmenu_item"><a href="#news" title="Новости недвижимости"><img src="img/butt/news.png" alt="" />Новости</a></span>
        <span class="gmenu_item"><a href="#articles" title="Статьи о недвижимости"><img src="img/butt/articles.png" alt="" />Статьи</a></span>
        <div class="region_item">Город: <span class="city">Москва</span> <a href="#chooseCity">Выбрать другой</a></div>
    </div>
</div>

CSS

html,body {
    padding:0;
    margin:0;
}
.clear {
    clear: left;
}
.main_menu {
    height: 75px;
    background: url(../img/grad/main_menu_bg.png) repeat-x #4f575f;
    min-width: 644px;
}
.logo {
    width: 113px;
    height: 52px;
    margin-top: 12px;
    margin-left: 31px;
    float: left;
}
.blue_menu {
    margin-left: 28px;
    margin-top: 2px;
    padding-right: 5px;
    float:left;
    height: 73px;
}
.bmenu_item_sel {
    display: block;
    width: 99px;
    height: 30px;
    background: url(../img/butt/bg_blue.png) no-repeat;
    border: 1px solid #909cac;
    opacity: 1;
    float: left;
    margin-left: 3px;
    margin-top: 3px;
}
.bmenu_item_sel:hover {
    opacity: 0.9;
}
.bmenu_item_sel a {
    display: block;
    padding-top: 6px;
    padding-left: 15px;
    color: #ebebeb;
    text-decoration: none;
    font-family: Tahoma, Arial, Sans-Serif;
    font-size: 14px;
    width: 84px;
    height: 24px;
}
.bmenu_item_sel img {
    float:left;
    margin-right: 5px;
    border: 0px;
}
.bmenu_item {
    display: block;
    width: 99px;
    height: 30px;
    background: url(../img/butt/bg_blue.png) no-repeat;
    border: 1px solid #727c87;
    opacity: 1;
    float: left;
    margin-left: 3px;
    margin-top: 3px;
}
.bmenu_item:hover {
    opacity: 0.9;
}
.bmenu_item a {
    display: block;
    padding-top: 6px;
    padding-left: 15px;
    color: #ebebeb;
    text-decoration: none;
    font-family: Tahoma, Arial, Sans-Serif;
    font-size: 14px;
    width: 84px;
    height: 24px;
}
.bmenu_item img {
    float:left;
    margin-right: 5px;
    border: 0px;
}
.gray_menu {
    margin-left: 28px;
    margin-top: 2px;
    height:73px;
    float:left;
}
.gmenu_item_sel {
    display: block;
    width: 99px;
    height: 30px;
    background: url(../img/butt/bg_gray.png) no-repeat;
    border: 1px solid #909cac;
    opacity: 1;
    float: left;
    margin-left: 3px;
    margin-top: 3px;
}
.gmenu_item_sel:hover {
    opacity: 0.9;
}
.gmenu_item_sel a {
   ...