JSFiddle - React, Tailwind, and code Playground

by Behseini

HTML

<!DOCTYPE HTML>
<html>
<body>
<div id="header">
	<div class="container">
		<div id="logo">
			<img src="http://images1.wikia.nocookie.net/__cb20101130020153/logopedia/images/9/9e/Google_Earth_logo.png" width="160" height="160">
		</div>
		<div id="social">
			<ul class="social_bookmarks">
				<li class="mail"><a href="#">Send us Mail</a></li>
				<li class="flicker"><a href="#">Follow us on dribbble</a></li>
				<li class="googlep"><a href="#">Follow us on Twitter</a></li>
				<li class="facebook"><a href="#">Join our Facebook Group</a></li>
				<li class="linkedin"><a href="#">Subscribe to our RSS Feed</a></li>
			</ul>
		</div>
	</div>
</div>
<div id="main" class="clear">
	<div class="container">
        			<img src="http://www.fantom-xp.com/wallpapers/29/Vector_Art_Image.jpg" width="700" height="400">

	</div>
</div>
<div id="footer">
	<div id="navigation">
		<ul class="nav">
			<li><a href="/">Home</a></li>
			<li><a href="/about/">Portfolio</a></li>
			<li><a href="/work/">About Us</a></li>
			<li><a href="/clients/">Recent Work</a></li>
			<li><a href="/contact/">Contact</a></li>
		</ul>
	</div>
</div>
</body>
</html>

CSS

* {
    margin: 0;
    padding: :0;
}

a:link {
    text-decoration: none;
}

body {
    background:red;
}

#header {
    position: relative;
    background: #ccc url(../img/layout/grain.png)!important;
    color: #3F0;
}

#main {
background:yellow;
    padding-top:10px;
}

#footer {
    position: relative;
    padding: 10px 0;
    background: #111 url(../img/layout/grain.png)!important;
    color: #3F0;
}

.container {
    position: relative;
    margin: 0 auto;
    width: 60%;
}
#logo{
float:left;
margin-buttom:5px;    
}
#logo img { max-width: 100%; height: auto; }

#social{
	float:right;

}
.clear
{
clear:both;
}

/*head search forma nd social bookmarks*/

.social_bookmarks{
height:20px;
position: relative;
top:7px;
float:left;
}

.social_bookmarks li{
float:left;
padding:0;
list-style-type:none;
}

.social_bookmarks li a{
float:left;
width:38px;
line-height:38px;
display: block;
text-indent: -9999px;
margin:0 0 0 2px;
outline: none;
padding:0;
opacity:0.3;

}

.social_bookmarks li a:hover{
opacity:0.8;
}

.social_bookmarks .linkedin a{background: transparent url(http://www.freethechildren.com/wp-content/themes/ftc/images/fb.png) 0 0  no-repeat;}
.social_bookmarks .facebook a{background: transparent url(http://www.freethechildren.com/wp-content/themes/ftc/images/fb.png) 0 0  no-repeat;}
.social_bookmarks .flicker a{background: transparent url(http://www.freethechildren.com/wp-content/themes/ftc/images/fb.png) 0 0  no-repeat;}
.social_bookmarks .mail a{background: transparent url(http://www.freethechildren.com/wp-content/themes/ftc/images/fb.png) 0 0  no-repeat;}
.social_bookmarks .googlep a{background: transparent url(http://www.freethechildren.com/wp-content/themes/ftc/images/fb.png) 0 0  no-repeat;}


.nav {
    border: 1px solid #ccc;
    border-width: 1px 0;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.nav li {
    display: inline;
}

.nav a {
    display: inline-block;
    padding: 10px;
    text-transform: uppercase;
...