JSFiddle - React, Tailwind, and code Playground
by alga noto
HTML
<script src="<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>"></script>
<div id="menu">
<div id="menu-container">
<div id="logo"></div>
<div id="box">
<ul>
<li><a>Quem somos</a>
</li>
<li><a>Produtos</a>
</li>
<li><a>Contato</a>
</li>
<li><a>|</a>
</li>
<li><a class="active">ENG</a>
</li>
<li><a>|</a>
</li>
<li><a>PT</a>
</li>
<li><a>|</a>
</li>
</ul>
</div>
</div>
</div>
<div id="index-bg">
<div id="content_container">
<div id="iconheart"></div>
</div>
</div>
CSS
body {
margin:0;
padding:0;
width:100%;
height:100%;
font-family:'Open Sans', sans-serif;
font-size:14px;
}
#menu {
width:1000px;
height:120px;
margin:0 auto;
}
#logo {
width:120px;
height:120px;
background: url('https://dl.dropboxusercontent.com/u/59895113/pnsaude.png') white no-repeat 50%;
float:left;
}
#menu-container {
margin:0 auto;
height:120px;
}
#box {
float:right;
height:120px;
display:table;
}
ul {
vertical-align: middle;
display:table-cell;
list-style-type: none;
}
li {
display:inline;
}
a {
letter-spacing: 1px;
font-weight:300;
float:left;
padding:1em;
}
a.active {
font-weight:400;
color:#1593D1;
}
a:hover {
color:#1593D1;
}
#index-bg {
height:680px;
margin:0 auto;
background:gray;
}
#iconheart {
width:412px;
float:right;
background: url('https://dl.dropboxusercontent.com/u/59895113/pnsaude.png') red no-repeat 50%;
}
#content_container {
width:1000px;
margin:0 auto;
}