JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<nav id="nav">
    <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
    </ul>
</nav>
<header id="header">
    <h1>This is the header</h1>
</header>

CSS

#nav            
{
position:fixed;
top: 0;
left: 0;
width: 100%;
height:7%;
text-align: center;
padding: .5em 0 1em 0;
z-index: 1;
overflow: hidden;
background-image: inherit;
}

#nav > ul
{
line-height: 0px;
position: relative;
display: inline-block;
margin: 0;
height: 21px;
border-left: solid 1px rgba(192,192,192,0.35);
border-right: solid 1px rgba(192,192,192,0.35);
}

#header
{
position: relative;
background-image: url('http://placehold.it/800x600');
background-size: cover;
background-position: center center;
background-attachment: fixed;
color: #fff;
text-align: center;
padding: 2.5em 0 2em 0;
cursor: default;
}

#banner
{
background: #fff;
text-align: center;
padding: 4.5em 0 4.5em 0;
}