JSFiddle - React, Tailwind, and code Playground

by Skyrazor

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="top_bar_wrap">
  <div class="top_bar">
    <div class="logo_new" style="width:130px;">
    </div>
    <div class="topinfobar_sn" style="width:160px;">
        <img src="http://twitter-icon.com/buttons/new/031.png" />
    </div>
    <div class="topinfobar" style="margin:17px 5px 0;font:13px Cambria;white-space: nowrap;">
      <span style="background:#00B0DB; padding:4px 6px 6px 6px;" title="Текущие дата и время">28 АВГУСТА 2014, ЧЕТВЕРГ. 15:46</span>
    </div>
    <div class="topinfobar" style="margin-top:13px;width:255px;"> <img src="http://www.phru.net/smt/Images1/benchmarkingtemplate.png" />
    </div>
    <div class="search_top" style="margin-top:14px;">
      <form action="" method="post" id="form_search">
      <input type="hidden" name="do" value="search" />
      <input type="hidden" name="subaction" value="search" />
      <input type="text" name="story" onkeydown="if(event.keyCode == 13) $('#form_search').submit();" onfocus="$(this).animate({width:257}, 0);document.getElementById('button').style.display='none';" onblur="if (!$(this).val()) $(this).animate({width:132}, 0);document.getElementById('button').style.display='';" placeholder="Поиск.." style="width: 132px;">
      </form>
    </div>
    <div class="user_panel">
   <span class="pro_21r check_event">
       <span class="login_name name"><a>Razor</a></span>
       <span style="display: inline-block;background: transparent url(//htmlforum.ru/uploads/profile/photo-78941.jpeg) no-repeat center center; background-size:cover;" class="foto_mini"></span>
</span><span id="button" class="add_news"><a class="button_red">новая публикация</a></span>
    </div>
  </div>
</div>

CSS

html,body {
  font: 12px tahoma, arial, verdana, sans-serif, Lucida Sans;
  color: #000;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

.top_bar_wrap {
  width: 100%;
  font-size: 11px;
  min-width: 1263px;
  height: 50px;
  background: #6FE149;
  margin-bottom: 15px;
}

.top_bar_wrap .top_bar {
  min-width: 1200px;
  max-width: 95%;
  margin: 0 auto;
  display: -ms-flex;
}

.top_bar_wrap .top_bar .logo_new {
    background: url(//fredrikericsson.com/images/partners/partner_hestra.jpg) no-repeat center center;
  width: 120px;
  height: 50px;
  float: left;
  /*padding: 0 5px;*/
}

.top_bar_wrap .top_bar .logo_new:hover {
  background-color: #00B0DB;
}

.top_bar_wrap .top_bar .logo_new a {
  display: block;
  width: 120px;
  height: 50px;
  text-indent: -9999px;
  /*padding: 0 5px;*/
}

.top_bar_wrap .top_bar .topinfobar {
  color: #fff;
  float: left;
  height: 25px;
  line-height: 20px;
  /*margin-left: 10px;*/
  text-align: left;
}

.topinfobar_sn {
  color: #fff;
  float: left;
  height: 25px;
  line-height: 20px;
  margin: 13px 0 0;
  text-align:center;
}

a   {text-decoration: none; color: #069;}
a:hover  {text-decoration: underline;}

.top_bar_wrap .top_bar .search_top {
  color: #fff;
  float: left;
  /*  line-height: 30px; */
  /*margin-left: 5px;*/
}

.top_bar_wrap .top_bar .search_top input[type="text"] {
  margin-top: 0;
  border: none;
  padding: 3px 4px;
  background: #fff url(//storage7.static.itmages.ru/i/14/0828/h_1409228959_5417200_68ef2bcead.gif) no-repeat;
  background-position: right 8px;
}

.top_bar_wrap .top_bar .user_panel {
  color: #fff;
  float: right;
  height: 50px;
  line-height: 30px;
}

.button_red {
  padding: 4px 8px 5px;
  background: #00B0DB;
  text-decoration: none;
  color: #FFF;
}

.button_red:hover {
  padding: 4px 8px 5px;
  color: #6FE149;
}

.top_bar_wrap .top_bar .user_panel .login_name {
  line-height: 50px;
}

.top_bar_wrap .top_bar .user_panel .login_name.name {

}

.top_bar_wrap .top_bar .user_panel...