JSFiddle - React, Tailwind, and code Playground

by gilly3

HTML

<textarea id="html">I moved the script eval from the oninput handler, because it throws errors like crazy while editing a script tag in the HTML pane.  And if your script tag contains 'alert("hello")', you get an alert with every key press.</textarea>
<textarea id="css"></textarea>
<textarea id="js">alert($)</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 win = iframe.contentWindow
var doc = win.document;
doc.write('<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">\x3cscript type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js">\x3c/script></head><body></body></html>');
$('#html,#css').bind('input', function() {
    $("style", doc).remove();
    $("head", doc).append("<style>"+$("#css").val()+"</style>");
    doc.body.innerHTML = $('#html').val();
}).triggerHandler('input');
$('#run').click(function() {
    win.eval($('#js').val());
    $("script", doc.body).each(function() {
        win.eval($(this).html());
    });
});