JSFiddle - React, Tailwind, and code Playground

by kimiliini

HTML

<div id="wrap">
    <div id="head">
        <div id="logo">
            <a href="index.php">
                <img id="logo_img" src="http://cupido.g6.cz/pictures/header.png" alt="EWITA" /></a>
        </div>
        <div id="menubar">MENU</div>
    </div>
    <div id="divider"></div>
    <div id="main_content">
        MAIN CONTENT
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>

CSS

* {
    margin     : 0;
    padding    : 0;
}
body {
    font-family: Arial;
    height     : 100%;
    background : orange;
}
img {
    border     : none;
}
/* ----------------------------------------------- */
#wrap {
    position   : relative;
    background : pink;
    width      : 100%;
    height     : 100%;
}
/* ----------------------------------------------- */
#head {
    position   : relative;
    width      : 800px;
    height     : 131px;
    margin     : 100px auto 0 auto;
    background : blue;
}
/* ----------------------------------------------- */
#logo {
    position   : relative;
    width      : 431px;
    float      : left;
    background : red ;
}

#logo_img {
    width      : 439px;
    height     : 131px;
    float      : left;
}
/* ----------------------------------------------- */
#menubar {
    position   : relative;
    background : #fff;
    width      : 300px;
    float      : left;
    margin-top : 107px;
    padding    : 3px 0 3px 10px;
}

/* ----------------------------------------------- */

#divider {
    border-top   : 5px solid #353535;
    border-bottom: 3px solid #888;
}

/* ----------------------------------------------- */

#main_content {
    position   : relative;
    background : url('http://cupido.g6.cz/pictures/background.png');
    border-top : 2px solid #fff;
    padding    : 120px 0 130px 0;
}