JSFiddle - React, Tailwind, and code Playground

HTML

<div id="site" class="hide">
    <div id="sitetitlebar">
        Click here to return to the editor.
    </div>
    <!-- This would be an iframe that loads whatever site you're working on -->
    HELLO WORLD THIS IS MY WEBSITE!
</div>
<div id="page">
    <div id="toolbar">
        <button id="run">Start site</button>
        TODO: put more toolbar buttons here
    </div>
    <div id="editor" contenteditable="true">
        <pre>
        Hey look at me I'm code wow so cool!
            
            
            
            
        Yay! Lots of lines!
            
            
            
            
        CSS is weird. Not sure how to make this take up the whole page without triggering a scroll bar.
        </pre>
    </div>
</div>

CSS

html, body {
    height: 100%;
    overflow: hidden;
}

.hide {
    display: none;
}

#page {
    position: relative;
    height: 100%;
}
#toolbar, #sitetitlebar {
    border: 1px solid #55c;
}
#sitetitlebar {
    cursor: pointer;
}
#sitetitlebar:hover {
    background-color: #55c;
    color: white;
}
#editor {
    border: 1px solid #55c;
}

JavaScript

var start = document.getElementById('run');
var overlay = document.getElementById('sitetitlebar');

var site = document.getElementById('site');
var page = document.getElementById('page');

start.onclick = function() {
    // TODO: fade/slide in
    page.classList.add('hide');
    site.classList.remove('hide');
};

overlay.onclick = function() {
    site.classList.add('hide');
    page.classList.remove('hide');
}