JSFiddle - React, Tailwind, and code Playground

by Brian Duffey

HTML

<header>
    <div id="logo">Website</div>
    <div id="headerMenu">
        <div class="menuItem"><a href="#">Home</a></div>
        <div class="menuItem"><a href="#">Menu</a></div>
    </div>
  </header>

  <nav>
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
    </ul>
  </nav>

<section id="main">
    <h1>Welcome!</h1>
    <p class="welcome">Welcome to our website!  You will find a site directory on the right, and important notices below.  Enjoy your stay.</p>
    <h3>Notice</h3>
    <p class="notice">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis tortor vel sem ultricies luctus. Phasellus dignissim lacus sapien, sed lobortis metus mollis in. Mauris faucibus, nunc sit amet porta imperdiet, orci felis.</p>
</section>    

<footer>
    <div id="copyright">&copy; 2015 Some Company</div>
</footer>

CSS

body { margin:0; background-color:lightblue; }
header { width:100%; background:linear-gradient(#507CA1, #294053); height:50px; box-shadow:0 5px 5px black; color:white; }
#logo { float:left; margin:17px 17px 0; }
#headerMenu { float:right; width:110px; margin-top:17px; }
.menuItem { display:inline; border-left:1px solid grey; padding:10px 5px; }
.menuItem a { color:white; }
a { text-decoration:none; }
nav a:hover { text-decoration:underline; }
nav { float:left; width:20%; }
ul { list-style-type:none; }
li { padding-bottom:5px; }
h1, h3, .welcome { text-align:center; }
h3 { color:red; text-decoration:underline; margin-top:25px; }
#main { float:right; width:80%; }
footer { width:100%; border-top:1px solid black; margin-top:5px; padding:5px 10px; clear:both; }