JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title>
        <style type="text/css" media="screen">
            #printhead {display:none;}
            
            html {
            height:100%; 
            max-height:100%; 
            padding:0; 
            margin:0; 
            border:0; 
            background:#fff; 
            font-size:80%; 
            font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
            /* hide overflow:hidden from IE5/Mac */ 
            /* \*/ 
            overflow: hidden; 
            /* */ 
            }
            
            body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
            
            #content {display:block; height:100%; max-height:100%; overflow:hidden; padding-left:0px; position:relative; z-index:3; word-wrap:break-word;}
            
            #head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:1; background-color:transparent; font-size:1em; z-index:5; color:#000; border-bottom:1px solid #000;}
            
            #foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:30px; background-color:transparent; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;}
            
            .pad1 {display:block; width:18px; height:18px; float:left;} /* Com este "height", alinho a border do header */
            .pad2 {display:block; height:100px;}
            .pad3 {display:block; height:0px;} /* Com este "height" controlo onde começa o content e o scroll do browser */
            #content p {padding:5px;}
            .bold {font-size:1.2em;...