JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<div class="body">
    <div class="container">
        <header class="header cf">
            <ul class="menu left">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
            </ul>
            <form class="login right">
                <input name="name-son" />
                <button>Do It Son!</button>
            </form>
        </header>
        
        <div class="content">
            <img src="http://www.tooft.com/wp-content/uploads/2010/06/Google_Logo_by_shawn015.jpg" />
        </div>
        
    </div>
</div>
<footer class="footer">
    <ul class="menu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
    </ul>
</footer>

CSS

* {margin: 0; padding: 0}
/* The Clear Fix */
.cf:before,
.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}

/* Sticky Footer */
html, body {height: 100%;}
.body {min-height: 100%;}
.container {overflow:auto;
	padding-bottom: 50px;}  /* must be same height as the footer */
.footer {position: relative;
	margin-top: -55px; /* negative value of footer height */
	height: 50px;
	clear:both;} 

/* General Styling junk */
.left {float: left;}
.right {float: right;}
.menu {padding: 0; margin: 5px;}
.menu li {display: inline-block;padding: 5px; margin: 0 10px 0 0;}
.menu li:last-child {margin-right: 0}

.header {background: #000;}
.footer {background: #efefef}
.content {width: 50%; margin: 50px auto 0;}
.content img {max-width: 100%;}
.login {margin: 5px;}