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=utf-8">
<title>Основы блочной верстки (Div верстки)</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">
 
    <div id="header">
    
        <div id="top_search_bar">
            <div id="search_form">
                <form>
                    Поиск: <input type="text">
                    <input type="submit">
                </form>
            </div>
        </div>
    
        <div id="top_logo_bar">
            
            <div id="logo">
                <img src='logo.png' border=0 width=180 height=104 />
            </div>
            <div id="flash_watch">
                <object type="application/x-shockwave-flash" data="clock.swf" width="110" height="110" id="flash">
                    <param name="movie" value="clock.swf">
                    <param name="quality" value="high">
                    <param name="wmode" value="transparent">
                    <param name="allowScriptAccess" value="always">
                    <param name="play" value="true">
                </object>
            </div>
            <div id="address">
               
            </div>
            
        </div>
        
        <div id="top_order_bar">
            <div id="top_order_form">
                <form>
                    <input type="submit">
                </form>
            </div>
        </div>
    
    </div>

    <div id="menu">
        <div id="menu_left_side"></div>
        <div id="menu_right_side"></div>
        <div id="menu_bg">
            <ul class="top_nemu_items">
                <li><a href=''>О нас</a></li>
                <li><a href=''>Как работает </a></li>
                <li><a href=''>сейчас</a></li>
                <li><a href=''>on-line</a></li>
                <li><a href=''>Схема</a></li>
               ...

CSS

html {
    height: 100%;
}
body {
    margin:0px;
    padding:0px;
    min-height: 100%;
    background-color: black;
    color: white;
}

#maket {
    background: url('fonClock.jpg');
    background-repeat: no-repeat;
    background-position: right top;
    height: 100%;
    margin: 0 25px 0 25px;
    min-width: 800px;
}

#header{
    height: 225px;
}

/* Плашка, где располагается поиск */
#top_search_bar {
    width: 100%;
    
    height: 70px;
}
#search_form {

    margin: 25px 10px 0 0;
    background-color: lime;
    float: right;
}
/* --- */

/* Плашка, где располагается лого, часы и адрес */
#top_logo_bar {
    width: 100%;
    height: 105px;
    background: url('fon_element.png');
    background-repeat: no-repeat;
    background-position: left center;
}
#logo{
    width:180px;
    float:left;    
}

#address{
    
    float:left;
    margin: 30px 0 0 50px;
}

#flash_watch{
    margin-left:50px;
    width: 110px;
    float: left;
}

span.address {
    display: block;
    margin: 0;
    padding:0;
    font-family: Arial; 
    font-size: 20px; 
    font-weight: bold; 
    text-shadow: #000 2px 2px 2px, #000 2px 2px 2px; 
    color: #F3CB12;
}

/* --- */

/* Плашка, где располагается заказ */
#top_order_bar {
    width: 100%;
    
    height: 50px;
}
#top_order_form {
    margin: 15px 10px 0 0;
    background-color: red;
    float: right;
}
/* --- */



/*  */
#menu{
    height: 40px;
    margin: 0 0 10px 0;
    width: 100%;
    
}

ul.top_nemu_items {
    margin: 0;
    padding: 0;
    height: 40px;
    display: table;
    width: 100%;

}
ul.top_nemu_items li{
    width: auto;
    padding: 13px 0 13px 0;
    display: table-cell;
    text-align: center;
    height: 40px;
    vertical-align: top;
    font-size: 14px;
    text-transform: uppercase;
    font-family: "Arial Narrow";
    color: #F3CB12;
    
}

ul.top_nemu_items li a{
    color: #F3CB12;
    text-decoration: none;
}

ul.top_nemu_items li a:hover{
    color: white;
}
/* Декор меню...