JSFiddle - React, Tailwind, and code Playground
HTML
<div id="header">
<h1>Davi Andrade</h1>
<nav>
<ul>
<li><a href="/">About</a></li>
<li><a href="/">Portfolio</a></li>
<li><a href="/">Downloads</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</nav>
</div>
<div id="content">
Text
</div>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: #3e3e3e;
font-family: "Segoe UI", "Lucida Grande", sans-serif;
}
#header {
background: #333333;
overflow: hidden;
}
h1 {
float: left;
font-family: Megrim;
text-transform: uppercase;
font-size: 36px;
margin: 18px 52px 18px 52px;
color: #b6b6b6;
text-shadow: 0 0 3px rgba(0, 18, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.5);
}
nav li a {
font-size: 1.3em;
display: block;
padding: 24px 48px 24px 0;
float: right;
color: white;
list-style: none;
text-decoration: none;
}
#content {
box-shadow: 0 -2px 3px rgba(0,0,0,0.35), 0 -1px 0 rgba(255,255,255,0.3);
}