JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mockup</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<div class="header">
<img src="img/l1.png" alt="This is logo" width="279" height="105">
<div class="headblock">
<div class="topnav">
<ul>
<li><a href="#">Some</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Items</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">RSS</a></li>
</ul>
</div>
<form class="searchform">
<input class="searchfield" type="text" value="Test">
<input class="searchfield" type="text" value="Test">
<input class="searchfield" type="text" value="Test">
<input class="searchbutton" type="button" value="Go!">
</form>
</div>
<nav class="clearfix">
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</nav>
</div>
</div> <!-- wrapper end -->
</body>
</html>
CSS
.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.clearfix{*zoom:1}
html,body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
a{
color: #900;
text-decoration: none;
}
/* ========================== */
.wrapper{
width: 1000px;
margin: 0 auto;
font-size: 1em;
}
.header{
background: #000;
}
.headblock{
float: right;
width: 650px;
}
.header img{
float: left;
}
.header ul{
list-style: none;
margin: 0;
padding: 0;
}
.topnav{
float: right;
}
.topnav li,
nav li{
float: left;
}
.topnav a{
color: #B7A3A2;
font-size: 0.813em;
}
form.searchform {
clear: right;
float: right;
}
nav{
clear: both;
}