JSFiddle - React, Tailwind, and code Playground

by Skisak

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

</head>
<body>
<div id="wrapper">
  <header>
    <div id="head_logo"></div>
    <div id="head_r">
      <div id="search_box">
        <form action="/ru/" method="post">
          <div class="search">
            <label for="mod-search-searchword">Искать...</label>
            <input name="searchword" id="mod-search-searchword" maxlength="20"  class="inputbox" type="text" size="20" value="Поиск..."  onblur="if (this.value=='') this.value='Поиск...';" onfocus="if (this.value=='Поиск...') this.value='';" />
            <input type="submit" value="Искать" class="button" onclick="this.form.searchword.focus();"/>
            <input type="hidden" name="task" value="search" />
            <input type="hidden" name="option" value="com_search" />
            <input type="hidden" name="Itemid" value="101" />
          </div>
        </form>
      </div>
      <div id="menu_box">
        <div id="css-menu">
          <ul>
            <li><a href="#"> <span class="text-top">Главная</span> <span class="text-bottom">О нашем проекте</span> </a> </li>
            <li><a href="#"> <span class="text-top">Справочник</span> <span class="text-bottom">авыф</span> </a> </li>
            <li><a href="#"> <span class="text-top">фыва</span> <span class="text-bottom">фыва</span> </a> </li>
            <li><a href="#"> <span class="text-top">афвыф</span> <span class="text-bottom">фыва</span> </a> </li>
          </ul>
        </div>
        <!--<p style="clear:both; margin-bottom:35px"></p>--> 
        
      </div>
    </div>
    <div id="spa"></div>
  </header>
  <div id="main"> </div>
</div>
</body>
</html>

CSS

/* CSS Document */
body {
    background: #fff url(../images/template/bg.png) top left repeat-x;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size:11px;
    font-weight:normal;
    color:#414141;
}
#wrapper {
    width:960px;
    margin:0px auto;
}
header {
    margin:0 0 5px 0;
    padding:30px 0 30px 30px;
    height:80px;
    border-bottom: 3px solid #666;
}

#head_logo {
    background:url(../images/error/system_error_logo.png) no-repeat;
    width:280px;
    height:80px;
    float: left;
}
#head_r {
    float: right;
}

.search {
    border: solid 1px #666;
    padding: 3px 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
    box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
    background: #fff;
}
.search .inputbox {
    background: #fff;
    padding: 3px 3px 3px 4px;
    width: 202px;
    border: solid 1px #666;
    outline: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
}
.search .button {
    color: #000;
    border: solid 1px #666;
    font-size: 11px;
    height: 24px;
    bottom:1px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .6);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #f60;
}
.search .button:hover {
    cursor:pointer;
    background: #fff;
}
#css-menu ul {
list-style: none;
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;

border:2px solid #666;
border-left: 1px solid #666;
float: left;
padding: 0;

}
#css-menu ul li {float: left}
#css-menu ul li a {
display: block;
text-decoration: none;
background-color: #595959;
padding: 5px 10px 0 10px;
color: #fefefe;
width: 120px;
border-right: 1px solid...