JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <ul>
    <li class='nav'><a href="https://accounts.google.com/ServiceLogin?service=oz&passive=1209600&continue=https://plus.google.com/?gpsrc%3Dogpy0%26tab%3DwX">+You</a></li>
    <li class='nav'><a href="https://www.gmail.com/intl/en/mail/help/about.html">Gmail</a></li>
    <li class='nav'><a href="https://www.google.com/imghp?hl=en&tab=wi&ei=vSQnVJPAK8eIsQTRkYCQDg&ved=0CAQQqi4oAg">Images</a></li>
</ul>
</div>
<div id="content">
<div id="search">Google Search</div>
<div id="lucky">I'm feeling lucky</div>
<form>
<input id="search_box" type="text" name="">
</form>
    </div>

CSS

#header{
    float:right;
}
#content{
position:absolute;
}
#search {
font-family: Arial;
font-size: 10;
font-weight: bold;
border: 1px solid black;
width: 7.2em;
white-space: nowrap;
padding-left: 4px;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
margin: 240px 14px 100px 225px;
display: inline-block; }

#lucky {
font-family: Arial;
font-size: 10;
font-weight: bold;
padding-left: 4px;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
border: 1px solid black;
display: inline-block; }


#search_box {
width: 600px;
position: absolute;
left: 65px;
top: 212px; }

ul {
list-style-type: none;
margin: 0;
padding: 0; }

.nav {
display: inline-block;
float: left;
padding: 20px;

}

JavaScript

a