JSFiddle - React, Tailwind, and code Playground

by doug65536

HTML

<div id="editor">
    <textarea>
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea>
</div>
<div id="status"></div>
<iframe id="preview" name="preview" src="about:blank">
</iframe>

CSS

html, body {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
#editor {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: calc(50% + 24px);
    box-sizing: border-box;
}
#status {
    position: absolute;
    bottom: 50%;
    height: 24px;
    width: 100%;
    border: inset 2px;
    line-height: 22px;
    box-sizing: border-box;
}
#editor textarea {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
#preview {
    position: absolute;
    left: 0px;
    top: 50%;
    width: 100%;
    height: 50%;
    display: block;
    border: solid red 1px;
    box-sizing: border-box;
}

JavaScript

$(function () {
    var previewDocument = $('#preview').prop('contentDocument');
    var previewBody = $('body', previewDocument);
    var textarea = $('#editor textarea');
    var status = $('#status');
    var shownContent = '';

    function update() {
        var source = textarea.val();
        var statusText = "OK";
        if (shownContent != source) {
            shownContent = source;
            try {
                previewBody.prop('innerHTML', source);
            } catch (e) {
                statusText = "Error: " + e;
            }
        }
        status.text(statusText);
        setTimeout(update, 1000);
    }
    update();
});