JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<header class="full_height" id="home">
<nav id="nav">
  <a href="index.html"><img src="logo.png" id="logo"></a>
  <ul>
     <li><a href="login.html" class="btn_main">Login</a></li>
  </ul>
</nav>
<div class="container">
<svg width="100%" height="100%">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<a href="#" class="btn">Free Trial</a>
<a href="#" class="btn">Learn More</a>
</div>
</header>
<footer>
<div class="container">
  <ul>
     <li><a href="contact.html">Contact</a></li>
  </ul>
</div>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript">
</script>
<script src="script.js" type="text/javascript">
</script>
</body>
</html>

CSS

* {
    padding:0px;
    margin:0px;
}

a {text-decoration:none;}

html,body {height: 100%;}
header {

}
#featurenav {
    background:#000;
    color:#FFF;
    height:50px;
    transition:0.3s;
}
#featurenav span {
    display:inline-block;
    font-weight:bold;
    margin-right:1em;
    opacity:.5;
}
#featurenav span.active {
    opacity:1;
}
#featurenav.fixed {
    position:fixed;
    width:100%;
    top:0;
    opacity: 0.9;
}
.fixed + #navPlaceholder {
    height:50px;
}
section {
    height:600px;
    background:#EEE;
    background: linear-gradient(to bottom, #DDD 0%, #FFF 100%);
    padding:1em;
}
.full_height { height: 100%; }
.mid_height { height: 350px; }
.container {
    width: 780px;
    margin:0px auto;
}

#blackOverlay{background-color:#000;opacity:0.0;position:absolute;top:0;width:100%;height:100%;}

ul li{
  display: inline;
}
li {
    list-style-type: none;
}

#nav {height: 70px; padding-left: 70px; padding-right: 70px;}
#nav ul {
    float: right;
}

#nav ul li a {
    display:inline-block;
-webkit-font-smoothing: antialiased;
color: white;
   opacity: 1;
font-family: 'Helvetica Neue', Arial, Helvetica, Verdana, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: 500;
    transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -webkit-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
line-height: 70px;
padding-left: 15px;
padding-right: 15px;
}

#nav ul li a:hover {
opacity: 1;
border-bottom: 2px solid white;
}

#nav ul li .active {
opacity: 1;
}

#nav img {
    float:left;
    padding-top: 15px;
}

footer {line-height: 80px;}
footer ul {
    float: right;
}

.container p{
    float:left;
}

#signin {background-color: #333;}
#home {    background:rgb(172, 222, 227);
background-repeat:no-repeat;
background-attachment:fixed;
box-sizing: border-box;
color: rgb(28, 94, 100);}

#header-content {color: rgb(28, 94, 100); font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size:...