JSFiddle - React, Tailwind, and code Playground

by Andy Blueman

HTML

<script src="//codemirror.net/lib/codemirror.js"></script>
<script src="//codemirror.net/mode/css/css.js"></script>
<script src="//codemirror.net/mode/javascript/javascript.js"></script>
<script src="//codemirror.net/mode/xml/xml.js"></script>
<script src="//codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<link rel="stylesheet" href="//codemirror.net/lib/codemirror.css">
<textarea id="QTA2" name="QTA2" placeholder="HTML"></textarea>
<iframe id='injectiframe'></iframe>

CSS

*, *:before, *:after {
    box-sizing: inherit;
    vertical-align:top;
}
html {
    box-sizing: border-box;
    height:100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.CodeMirror {
    display:inline-block;
    width: 45%;
}
iframe {
    border:1PX solid grey;
    width: 45%;
    height: 100%;
}

JavaScript

/*---------------- Ignore this (below) ---------------
(function () {
var editor = CodeMirror.fromTextArea(document.getElementById('QTA2'), {
        mode: "htmlmixed",
        lineNumbers: true
    });
})();
/*---------------- Ignore this (above)---------------*/ 

(function () {
    var frame = $('#injectiframe'),
        contents = frame.contents(),
        body = contents.find('body'),
        styleTag = contents.find('head').append('<style></style>').children('style');

    $('textarea').focus(function () {

        var $this = $(this);

        $this.keyup(function () {
            if ($this.attr('id') === 'QTA2') {
                body.html($this.val());
            } 
        });
    });
})();