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" lang="en"><head>
    <meta name="Author" content="(c) 2008 - pud.ca">
    <meta http-equiv="imagetoolbar" content="no">
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>100% height example</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            }
        
        body, html {
            height: 100%;
            }
        
        #container {
            background: #f00; /* styling only */
            width: 100%;
            margin: 0 auto;
            position: relative;
            min-height: 100%;
            height: 100%;
            
    
    
            }
        
        #content {
            padding-bottom: 100px;
            width: 980px;
            background-color: #FFF;
            margin: 0 auto;
            min-height: 100%;
            margin-top: -20px;
            -webkit-box-shadow: 0px 1px 3px rgba(27, 57, 50, 0.44);
            -moz-box-shadow:    0px 1px 3px rgba(27, 57, 50, 0.44);
            box-shadow:         0px 1px 3px rgba(27, 57, 50, 0.44);
            -moz-border-radius: 5px;
            border-radius: 5px;
            position:relative;
            
            }
        
        #footer {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            background: #0f0;
            }
            
            #header {
           
            height: 100px;
            width: 100%;
            background: #0f0;
            }
            
    </style>
</head>
<body>
    
    <div id="container">
    <div id="header">
    header
</div>
        <div id="content">
            Your content goes here
        </div>
        <div id="footer">
            Footer here
        </div>        
   ...