JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="script.js"></script>
        <link href="style.css" rel="stylesheet">
    </head>
    
    <body>
        <article>
            <header>
                <div class="top-strip"></div>
                Header
            </header>
            <nav>Navigation</nav>
            <section>
            
            <p>Content</p><p>Content</p><p>Content</p>
             <p>Content</p><p>Content</p><p>Content</p>
              <p>Content</p><p>Content</p><p>Content</p>
 <p>Content</p><p>Content</p><p>Content</p>
 <p>Content</p><p>Content</p><p>Content</p>     <p>Content</p><p>Content</p><p>Content</p>
             <p>Content</p><p>Content</p><p>Content</p>
              <p>Content</p><p>Content</p><p>Content</p>
 <p>Content</p><p>Content</p><p>Content</p>
 <p>Content</p><p>Content</p><p>Content</p>     <p>Content</p><p>Content</p><p>Content</p>
             <p>Content</p><p>Content</p><p>Content</p>
              <p>Content</p><p>Content</p><p>Content</p>
 <p>Content</p><p>Content</p><p>Content</p>
 <p>Content</p><p>Content</p><p>Content</p>     <p>Content</p><p>Content</p><p>Content</p>
             <p>Content</p><p>Content</p><p>Content</p>
              <p>Content</p><p>Content</p><p>Content</p>
 <p>Content</p><p>Content</p><p>Content</p>
 <p>Content</p><p>Content</p><p>Content</p>     <p>Content</p><p>Content</p><p>Content</p>
             <p>Content</p><p>Content</p><p>Content</p>
              <p>Content</p><p>Content</p><p>Content</p>
 <p>Content</p><p>Content</p><p>Content</p>
 <p>Content</p><p>Content</p><p>Content</p>     <p>Content</p><p>Content</p><p>Content</p>
             <p>Content</p><p>Content</p><p>Content</p>
              <p>Content</p><p>Content</p><p>Content</p>
 <p>Content</p><p>Content</p><p>Content</p>
 <p>Content</p><p>Content</p><p>Content</p>     <p>Content</p><p>Content</p><p>Content</p>
            ...

CSS

@charset "utf-8";
/* CSS Document */
section, article, header, footer{
    display: block;
}
*{
    padding:0;
    margin:0;
}
html, body{
    width:100%;
    height:100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}
article{
    height: 100%;
    background: #096;
    padding-left: 198px;
}
header{
    height: 125px;
    background-color: #816710;
    margin-left: -198px;
}
.top-strip{
    height: 19px;
    background-color: #fce9ae;
}
nav{
    position: absolute;
    left: 0;
    top: 125px;
    bottom: 10px;
    width: 198px;
    background-color: #d70319;
}
footer{
    background: #CCCCCC;
    height: 10px;
    margin-top: -10px;
    line-height: 0px;
}

JavaScript

// HTML5 Shiv v3 | @jon_neal @afarkas @rem | MIT/GPL2 Licensed
// Uncompressed source: https://github.com/aFarkas/html5shiv
(function(a,b){function f(a){var c,d,e,f;b.documentMode>7?(c=b.createElement("font"),c.setAttribute("data-html5shiv",a.nodeName.toLowerCase())):c=b.createElement("shiv:"+a.nodeName);while(a.firstChild)c.appendChild(a.childNodes[0]);for(d=a.attributes,e=d.length,f=0;f<e;++f)d[f].specified&&c.setAttribute(d[f].nodeName,d[f].nodeValue);c.style.cssText=a.style.cssText,a.parentNode.replaceChild(c,a),c.originalElement=a}function g(a){var b=a.originalElement;while(a.childNodes.length)b.appendChild(a.childNodes[0]);a.parentNode.replaceChild(b,a)}function h(a,b){b=b||"all";var c=-1,d=[],e=a.length,f,g;while(++c<e){f=a[c],g=f.media||b;if(f.disabled||!/print|all/.test(g))continue;d.push(h(f.imports,g),f.cssText)}return d.join("")}function i(c){var d=new RegExp("(^|[\\s,{}])("+a.html5.elements.join("|")+")","gi"),e=c.split("{"),f=e.length,g=-1;while(++g<f)e[g]=e[g].split("}"),b.documentMode>7?e[g][e[g].length-1]=e[g][e[g].length-1].replace(d,'$1font[data-html5shiv="$2"]'):e[g][e[g].length-1]=e[g][e[g].length-1].replace(d,"$1shiv\\:$2"),e[g]=e[g].join("}");return e.join("{")}var c=function(a){return a.innerHTML="<x-element></x-element>",a.childNodes.length===1}(b.createElement("a")),d=function(a,b,c){return b.appendChild(a),(c=(c?c(a):a.currentStyle).display)&&b.removeChild(a)&&c==="block"}(b.createElement("nav"),b.documentElement,a.getComputedStyle),e={elements:"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video".split(" "),shivDocument:function(a){a=a||b;if(a.documentShived)return;a.documentShived=!0;var f=a.createElement,g=a.createDocumentFragment,h=a.getElementsByTagName("head")[0],i=function(a){f(a)};c||(e.elements.join(" ").replace(/\w+/g,i),a.createElement=function(a){var b=f(a);return...