JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<div id="headerlogo">
    <a href="index.html">
        <img src="http://www.mindtale.com/images/logo.png">
    </a>
    <div id="headerfill"></div>
    <div id="header">
        <a href="portfolio.html" id="headerlink1" >Portfolio</a>
        <a href="contact.html" id="headerlink2" >Contact</a>
    </div>
   
</div>


<!-- Content -->
<div id="content">
   <h2>A random heading</h2>
   <p>Content Placeholder ... </p>
   <p>Content Placeholder ... </p>
   <p>Content Placeholder ... </p>
   <p>Content Placeholder ... </p>
 </div>

CSS

html {
    background: url("http://www.mindtale.com/images/bg.jpg") no-repeat fixed center center / cover transparent;
    height: 100%;
    max-height: 100%;
}

* Header */
/* -------------------------------------------------- */



#header {
    z-index:3;
    position:fixed;
    background: url(http://www.mindtale.com/images/header.png) no-repeat center;
    height: 102px;
    top:0px;
    left:0px;
    width:100%;
    padding: 0px;
}

#headerfill {
    z-index:4;
    position:fixed;
    background: url(http://www.mindtale.com/images/headerfill.png) repeat-x;
    height: 98px;
    top:0px;
    left:0px;
    width:100%;
    padding: 0px;
}

#headerlink1 {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size:90%;
    z-index:4;
    position:fixed;
    top:55px;
    left:18%;
    color:#999;
    padding: 0px;
}

#headerlink2 {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size:90%;
    z-index:4;
    top:55px;
    left:78%;
    color:#999;
    padding: 0px;
}

#headerlogo {
    z-index:5;
    position:fixed;
    top:30px;
    left:42%;
    color:#999;
    padding: 0px;
}

/* Content */
/* -------------------------------------------------- */

#content {
position:fixed;
width:100%;
color:#222;
top: 70px; 
bottom: 0; 
left: 0; 
right: 0;
padding: 25px;
overflow: auto;



font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

}


/* Footer */
/* -------------------------------------------------- */

#footer {
position:fixed;
bottom:0px;
left:0px;
width:100%;
color:#999;
background:#333;
padding: 8px;
}

JavaScript

/* fixed header */