JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<title>Пример</title>
<style>
* { 
    margin:0; 
    padding:0
}

html { 
    height:100%;
    min-width: 505px;
    background:#369ae0;
}

body {
    background: url(http://www.flash-screen.com/free-wallpaper/uploads/200901/imgs/1231516383_1024x768_lighthouse-in-ocean.jpg) 50% 60% no-repeat;
    height: 80%;
    color:#FFF;
    text-align: center;
}

a {
    color:#008;
    text-decoration:none;
}

#content {
    display: inline-block;
    vertical-align: middle;
    font: 14px Micra, sans-serif;
    width: 500px;
    border: 1px solid blue;
    text-align: left;
}

#logo {
    display: inline-block;
    width: 150px;
    vertical-align: top;
    border: 1px solid red;
}

.menu {
    display: inline-block;
    font-size:16px; 
    list-style-type: none;
    vertical-align: bottom;
    width: 200px;
    margin: 100px 0 200px 130px;
    border: 1px solid green;
}

.menu li {
    line-height:30px;
    border-bottom:0px #FFF dotted;
    font-weight:400;
}

#footer {
    background: #555;
    position: fixed;
    bottom: 0; 
    left: 0;
    height:20%; 
    width: 100%;
}

.helper {
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
    visibility: hidden;
    margin: 0 0 0 -3px;
}

</style>
<!--[if lte IE 7]>
<style>#content, #logo, .menu, .helper { display: inline; zoom: 1; }</style>
<![endif]-->
<div id="content">
    <div id="logo">
        <h1>Logotype is here</h1>
    </div>
    <ul class="menu">
        <li><a href="#">About</a></li>
        <li><a href="#">Production</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contacts</a></li>
    </ul>
</div>

<div class="helper"></div><!-- подробности здесь: http://forum.htmlbook.ru/index.php?showtopic=19320 -->

<div id="footer"></div>