JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
            <meta charset="utf-8" /> 
            <meta http-equiv="X-UA-Compatible" content="chrome=1"> 
            <title>flexbox</title> 
    </head> 
    
    <body>
        <div> 
            <div id="col_nav"> 
                <nav class="shadow"> 
    <div style="text-align: center; font-weight: bold;">flexbox</div> 
    <section> 
        <div class="title">Overview</div> 
        <a href="/"><div class="link">System Status</div></a> 
    </section> 
 
    <section> 
        <div class="title">Advanced</div> 
        <a href="/console"><div class="link">Console</div></a> 
        <a href="/support"><div class="link">Support</div></a> 
        <a href="/log"><div class="link">Log</div></a> 
    </section> 
    <section> 
        <div class="title">Help</div> 
        <a href="/docs"><div class="link">Documentation</div></a> 
        <a href="/about"><div class="link">About</div></a> 
    </section> 
</nav> 
            </div> 
            
            <div id="col_content"> 
                <div class="center"> 
                    <div> 
                        <div class="title">Status</div> 
                        <div class="refresh success"><span class="count" id="system.output.pxl.nodes_summary.enumerated.count">5</span> nodes enumerated: <span id="system.output.pxl.nodes_summary.enumerated.addresses">1-5</span></div><div class="refresh error"><span class="count" id="system.output.pxl.nodes_summary.calibrated.count">0</span> nodes calibrated: <span id="system.output.pxl.nodes_summary.calibrated.addresses"></span></div><div class="refresh error"><span class="count" id="system.output.pxl.nodes_summary.alive.count">0</span> nodes alive: <span id="system.output.pxl.nodes_summary.alive.addresses"></span></div> 
                        
                    </div> 
                </div> 
            </div> 
        </div> 
        
        <footer...

CSS

@charset "UTF-8";

/* CSS Two Column layout - http://www.dynamicdrive.com */

html, body {
    /* absolute positioning the body breaks flex box in Mozilla */
    /*position: absolute;*/
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

/* main body flex column contains: page header, page content, page footer */
body {
    background: #EEE;
    font-family: Helvetica, Arial, sans-serif;
    
    /* how the child elements behave */
    /* lay out children vertically */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-box-align: stretch;
    display: box;
    box-orient: vertical;
    box-align: stretch;
    
    /* don't scroll if the window is shorter than the nav bar */
    overflow: hidden;
}

header, footer {
    display: block;
    background: #666666;
    
    margin: 3px;
    padding: 3px 5px 3px 5px;
}
/* main page header & footer */
body > header {
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
body > footer {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

header a:link, header a:visited,
footer a:link, footer a:visited {
    text-decoration: none;
    color: #D8D8D8;
}

header a:hover, header a:active,
footer a:hover, footer a:active {
    text-decoration: none;
    color: #FF6600;
}

.shadow {
    -webkit-box-shadow: 0px 0px 10px #999;
    -moz-box-shadow: 0px 0px 10px #999;
    box-shadow: 0px 0px 10px #999;
    -webkit-transition-duration: 0.2s;
}

.shadow:hover {
    -webkit-box-shadow: 0px 0px 10px #777;
    -moz-box-shadow: 0px 0px 10px #777;
   ...