JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
     <html>
        <head>

                <meta charset="utf-8"/>

                <title>TeaM GreeD</title>

                <link href="css/common.css"  rel="stylesheet" type="text/css"/>
                
                
                <link href="css/typography.css"  rel="stylesheet" type="text/css"/>
                <!--[if lt IE 9]>
                <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
                <![endif]--> 
        </head>

        <body>
                <header id="header">
                    <div id="head_container">
                        <a href="javascript:void(0);" title="logo" id="logo"><img src="images/logo.jpg" border="0" alt="logo" title="logo"/></a>
                     <div id="menu">
                        <ul>

                                <li  class="on"><a href="javascript:void(0);" title="Главная">Главная</a></li>

                                <li><a href="javascript:void(0);" title="О нас">О нас</a>

                                        <ul>

                                                <li><a href="ustav.html" title="Устав" >Устав</a></li>

                                                <li><a href="sostav.html" title="Состав клана">Состав клана</a></li>

                                                <li><a href="vstuplenie.html" title="Вступление в клан">Вступление в клан</a></li>

                                        </ul>

                                </li>

                                <li><a href="javascript:void(0);" title="Наши проекты">Наши проекты</a>

                                        <ul>

                                                <li><a href="tournament.html" title="GreeD Tournament">GreeD Tournament</a></li>

                                                <li><a href="serial.html" title="Сериал Миротворцы">Сериал Миротворцы</a></li>

                                                <li><a href="club.html" title="GreeD...

CSS

html, body{
    margin:0; /*Для схемы с прижатым футером высота на всю область просмотра*/
}
html{
    font:10px verdana, geneva, sans-serif;    /*Задаем гарнитуру и размер шрифта*/
    background:#ececec;    /*Задаем фоновое изображение*/
    background-image: -moz-linear-gradient(top, #333333, #ececec); /* Firefox 3.6 */ 
    background-image: -webkit-linear-gradient(#333333, #ececec); /* Safari & Chrome */ 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#333333', endColorstr='#ececec'); /* IE6 & IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#333333', endColorstr='#ececec')"; /* IE8 */     
}
body{
    margin:0;       /*Убираем отступы*/
    
}
#container{
    height:2500px;
    width:1000px;    /*Задаем ширину основного контейнера*/
    margin:auto;    /*Центрируем*/
    background:#666;
}
#right{
    float:right;
    width:250px;
}
#teamspeak{
    float:right;
    width:240px;
    height:410px;
    background:#333;
    margin-bottom:10px;
    margin-right:5px;
}
#left{
    float:left;    
    width:750px;            
    height:2500px;
    background:#333;            
}
#v_centre{
    margin:auto;
    width:700px;
    font:14px Myriad Pro, geneva, sans-serif;
    color:#fff;
}
#float_news{
    height:260px;
    width:720px;
    margin:auto;
    background:#fff;
    margin-bottom:10px;
}
#news{
    margin:auto;
    width:720px;
    height:2200px;
    background:#ececec;
    padding:10px 0 0 10px;
}
#content{
    margin:auto;
    width:720px;
    height:2500px;
    background:#ececec;
    padding:0 0 0 10px;
}
#clear{                /*Блок-отступ между контентом и футером*/
    height:20px;
    clear:both;
}
#footer{
    width:1000px;
    overflow:hidden;
    position:relative;
    height:30px;
    background:#000;
    color:#fff;
    margin:auto;
}
#header{
    background:#333;
    left:0;
    top:0;
    height:39px;
    margin:auto;
}
#head_container{
    width:1000px;
 ...