JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"/>
<link href="style/reset.css" rel="stylesheet" type="text/css"/>
<link href="style/style.css" rel="stylesheet" type="text/css"/>
<title>Самарское главная</title>
</head>
<body>
    <!-- Топ меню-->
    <div id="top-menu">
    <div>
        <ul>
            <li><a href="#">Новости</a></li>
            <li><a href="#">Объявления</a></li>
            <li><a href="#">Услуги</a></li>
            <li><a href="#">Товары</a></li>
            <li><a href="#">Блоги</a></li>
            <li><a href="#">Форум</a></li>
            <li><a class="selected" href="#">Фото</a></li>
            <li><a href="#">Люди</a></li>
            <li><a href="#">Спорт</a></li>
            <li><a href="#">Культура</a></li>
            <li><a href="#">Карта</a></li>
            <li><a class="voiti" href="#">Войти</a></li>
        </ul>
    </div>
    </div>
       
<div id="wrapper"> <!-- Шапка -->
    <div id="header">
        <div class="logo"><img src="images/logo.jpg" width="377" height="136" /></div>
        <div class="middle">
            <img src="images/banner-up.jpg" width="318" height="60" />
            <div class="avatar"></div>
            <a href="#" class="nick">Netsvetaev</a>
            <a href="#" class="myfoto">Мои фотографии</a>
        </div>
        <div class="weather">
            <img src="images/sun.png" />
            <h3>Погода: +15</h3>
            <p>Давление:<span> 768 мм</span></p>
            <p>Ветер:<span> 2 м/с, сев.</span></p>
            <p class="zavtra">Завтра: <span> +12</span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div id="left">
        <div class="search"><!--Поиск-->
            <div class="left"></div>
            <div class="middle">
                <h1>Альбомы пользователей</h1>
                <form>
                    <input...

CSS

html {
    height: 100%;
}
body, #wrapper {
    height: auto !important;
    min-height: 100%;
}
body {
    background: url("../images/Samarskoe-bg.png") repeat scroll 0 0 transparent;
    color: #000000;
    font: 16px Arial,sans-serif;
}
#wrapper {
    height: auto !important;
    margin: 0 auto;
    min-height: 100%;
    width: 960px;
}
#wrapper > * {
    height: auto;
    min-height: 100%;
}
#top-menu {
    background-color: white;
    border-bottom: 1px solid #CCCCCC;
    height: 50px;
    width: auto;
}
#top-menu > div {
    margin: 0 auto;
    width: 960px;
}
#top-menu ul {
    font: 16px Arial,sans-serif;
    margin: 0 auto;
    padding-top: 0;
    text-align: center;
    width: 960px;
}
#top-menu ul li {
    display: inline-block;
}
#top-menu ul li a {
    color: #3366CC;
    display: inline-block;
    font: 16px Arial,sans-serif;
    height: 50px;
    padding: 12px 12px 0;
    text-align: center;
}
#top-menu ul li a.voiti {
    color: #339900;
}
#top-menu ul li a.selected {
    background: url("../images/menu-selected.jpg") repeat-x scroll 0 0 transparent;
    color: black;
    text-decoration: none;
}
#header {
    height: 135px;
    margin-top: 6px;
}
#header .logo {
    float: left;
    margin-right: 12px;
    width: 365px;
}
#header .middle {
    float: left;
    width: 340px;
}
#header .middle > img {
    margin-bottom: 8px;
}
#header .middle .avatar {
    border: 1px solid #DEB700;
    float: left;
    height: 34px;
    margin-right: 4px;
    width: 34px;
}
#header .middle a {
    display: block;
    font-size: 12px;
}
#header .middle a.nick {
    color: #666666;
}
#header .middle a.myfoto {
    color: #3366CC;
}
#header .weather {
    float: right;
    font: 12px Arial;
    margin-top: 20px;
    width: 217px;
}
#header .weather img {
    float: left;
    margin-right: 6px;
}
#header .weather h3 {
    font-size: 18px;
    font-weight: lighter;
    margin-bottom: 10px;
}
#header .weather p {
    color: #666666;
    padding-bottom: 3px;
}
#header...