JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div id="bounding-box">
            <div id="content-box">
                <div id="bd"></div>
            </div>
        </div>
        <a href="#" id="action">Run Test</a>
    </body>
</html>

CSS

#bounding-box {
    border: 1px solid blue;
    position: absolute;
    top: 100px;
    left: 100px;
    overflow: hidden;
    z-index: 2;
    visibility: hidden;
}

#content-box {
    border: 1px solid red;
    display: none;
    height: 100%;
    position: relative;
    width: 500px;  
}

#bd {
    border: 1px solid green;
    overflow: auto;
}

JavaScript

var get = function(id) {
    return document.getElementById(id);
};
    
var on = function(id, type, fn) {
    get(id).addEventListener(type, fn, false);
};
    
on('action', 'click', function() {
    var boundingEl = get('bounding-box'),
        contentEl = get('content-box'),
        bodyEl = get('bd');
        
    contentEl.style['display'] = 'block';
    
    bodyEl.innerHTML = '<ul><li>One</li><li>Two</li></li>Three</li><li>Four</li></ul>';
        
    contentEl.style['visibility'] = 'visible';
});