JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="html"></textarea>
<textarea id="css"></textarea>
<textarea id="js"></textarea>
<button id="run">Run</button>
<iframe id="preview"></iframe>

CSS

html, body {
    margin:0;
    padding:0;
}
#html {
    position:fixed;
    left:0;
    top:0;
    right:50%;
    bottom:50%;
    
    border-style:solid;
    border-color:black;
    border-width:0 1px 1px 0;
    margin:0 1px 1px 0;
}
#css {
    position:fixed;
    left:50%;
    top:0;
    right:0;
    bottom:50%;
    border:none;
    
    border-style:solid;
    border-color:black;
    border-width:0 0 1px 0;
    margin:0 0 1px 0;
}
#js {
    position:fixed;
    left:0;
    top:50%;
    right:50%;
    bottom:0;
    
    border-style:solid;
    border-color:black;
    border-width:0 1px 0 0;
    margin:0 1px 0 0;
}
#preview {
    position:fixed;
    left:50%;
    top:50%;
    right:0;
    bottom:0;
    width:50%;
    height:50%;
    margin:0;
    border:none;
}
#run {
    position:fixed;
    top:50%;
    right:50%;
    border-width:1px;
    border-style:solid;
    border-color:#94A8B5 #476B81 #476B81 #94A8B5;
    margin:0 3px 0 0;
    padding:3px 25px;
    font-size:14pt;
    border-radius:3px;
    font-weight:bold;
    font-family:sans-serif;
    background: #f2f6f8;
    background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f6f8), color-stop(50%,#d8e1e7), color-stop(51%,#b5c6d0), color-stop(100%,#e0eff9));
    background: -webkit-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
    background: -o-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
    background: -ms-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 );
    background: linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
    color:#2E404B;
    text-shadow: #ffffff 1px 1px 0;
}
#run:hover {
    cursor:pointer;
    background: #f6fafc;
    background: -moz-linear-gradient(top, #f6fafc 0%,...

JavaScript

var iframe = document.getElementById('preview');
var doc = iframe.contentWindow.document;
$('#html,#css').bind('input', function() {
    doc.body.innerHTML = '<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">' + $('#css').val() + '</style></head><body>' + $('#html').val() + '</body></html>';
    $(doc.body).find('script').each(function() {
        eval($(this).html());
    });
}).triggerHandler('input');
$('#run').click(function() {
    iframe.contentWindow.eval($('#js').val());
});