JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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...

CSS

html {
    height: 100% !important;
}

body {
    background: url("../images/Samarskoe-bg.png") repeat scroll 0 0 transparent;
    color: #000000;
    font: 16px Arial,sans-serif;
    height: 100% !important;
}
#wrapper {
    height: 100% !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 .weather p.zavtra {
   ...