JSFiddle - React, Tailwind, and code Playground

by stan07

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Главная</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/jquery.placeholder.min.js"></script>
<script src="js/cufon.js"></script>
<script src="js/Franklin_Gothic_Medium_400.font.js"></script>
<script src="js/CufonReplace.js"></script>
<script src="js/scripts.js"></script>
<!--[if lt IE 9]>  
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
<![endif]--> 
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
<body>
    <div id="wrap">
        <div id="status_bar_left">
            <h2>ODEKO</h2>
        </div>
        <div id="status_bar_right">
            <h2>INN-KOM</h2>
        </div>
    </div>
    <header>
        <!--start status_bar-->
        <div id="status_bar">
            <nav>
                <ul id="top_menu">
                    <li><a class="home" href="#"></a></li>
                    <li><a class="mail" href="#"></a></li>
                    <li><a class="site_map" href="#"></a></li>
                </ul>
            </nav>
        </div>
        <!--end status_bar-->
        <div id="header_left">
            <div id="logo"><span><a href="#">#</a></span></div>       
            <p class="slogan">Интернет в каждом доме, подключайся!</p>    
            <nav>
                <ul id="main_menu">
                    <li><a class="act" href="#">О компании</a></li>
                    <li><a href="#">Услуги</a></li>
                    <li><a href="#">Цены</a></li>
                    <li><a href="#">Контакты</a></li>
                    <li><a href="#">Заявка</a></li>
                    <li class="last"><a href="#">Медиаресурсы</a></li>
                 </ul>
            </nav>
        </div><!--end header_left-->
        <div id="header_right">
            <div...

CSS

@import url(reset.css);
/*start General*/
header, nav, section, article, aside, footer {
    display:block;
    width:1000px;
    margin:auto;
}
a:hover {
    text-decoration:underline;
}
a {
    text-decoration:none;
}
body {
    font-family:Arial, Helvetica, sans-serif;
}
/*end General*/
#wrap {
    width:1008px;
    height:44px;
    margin:auto;
}
#wrap h2 {
    padding-left:34px;
    line-height:39px;
    font-size:16px;
    font-weight:bold;
    color:#FFF;
}
#status_bar_left {
    margin-top:5px;
    background:url(../images/status_bar-left.png) no-repeat;
    width:129px;
    height:39px;
    float:left;
    position:relative;
    z-index:99;
}
#status_bar_right {
    margin-top:5px;
    background:url(../images/status_bar-right.png) no-repeat;
    width:129px;
    height:39px;
    float:right;
    position:relative;
    z-index:99;
}
/*start header*/

header {
    overflow:hidden;
    position:relative;
    height:221px;
    margin-bottom:4px;
    top:-44px;
    background:url(../images/header--bottom-border.png) repeat-x bottom #f8f8f8;
}
#status_bar {
    background:url(../images/status_bar-bg.jpg);
    height:53px;
    width:1000px;
    position:relative;
    overflow:hidden;
}
#top_menu {
    background:url(../images/top-menu-bg.jpg) repeat-x;
    width:90px;
    height:19px;
    margin:auto;
    padding:8px 0 0 10px;
    -moz-border-radius:0 0 7px 7px;
    -webkit-border-radius:0 0 7px 7px;
    border-radius:0 0 7px 7px;
}
#top_menu li {
    float:left;
    margin-right:15px;
}
#top_menu a {
    height:11px;
    display:block;
}
#top_menu a.home {
    background:url(../images/top-menu-home.gif) no-repeat;
    width:12px;
}
#top_menu a.mail {
    background:url(../images/top-menu-mail.gif) no-repeat;
    width:19px;
}
#top_menu a.site_map {
    background:url(../images/top-menu-site-map.gif) no-repeat;
    width:9px;
}
#header_left {
    float:left;
    width:456px;
}
#logo {
    margin:35px 0 0 25px;
    background:url(../images/logo.png);
   ...