JSFiddle - React, Tailwind, and code Playground

by IngoVals

HTML

<body>
	<div id="wrapper">

			<div id="logo">
			</div>
			<div id="navbar">
				<ul>
					<li><a href="">Home</a></li>
					<li><a href="">News</a></li>
					<li><a href="">Contact</a></li>
					<li><a href="">About</a></li>
				</ul>
			</div>
		<div id="main">
			<p>
			Some text here!
			</p>
		</div>
	</div>
</body>

CSS

body{
margin: 0;
padding: 0;
background: #dddddd
}

#wrapper{
width: 800px;
margin: 0 auto;

}

#logo{
border-radius: 15px 15px 0px 0px;
margin: 15px 0px 0px;
height: 250px;
background-image: url(http://img827.imageshack.us/img827/6628/testheaderr.png), url(http://img27.imageshack.us/img27/4359/testheaderpart.png);
background-position: center, left;
background-repeat:no-repeat, repeat;
}

#navbar {
border-radius: 0px 0px 15px 15px;
background-color: #abcdef;
background-image: -webkit-gradient(linear, left top, left bottom, from(#abcdef), to(#edf4fc));
background-image: -webkit-linear-gradient(top, #abcdef, #edf4fc);
background-image:    -moz-linear-gradient(top, #abcdef, #edf4fc);
background-image:      -o-linear-gradient(top, #abcdef, #edf4fc);
background-image:         linear-gradient(to bottom, #abcdef, #edf4fc);
height: 50px;
}

#navbar ul{
list-style-type:none;
}

#navbar li{
float: left;
}

#navbar a{
display: block;
width: 80px;
}

#main{
background: #edf4fc;
border-radius: 15px;
padding: 15px;
margin: 15px 0px;
}