JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://codemirror.net/lib/codemirror.js"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<div class="button_wrap">
  <span class="containerTitle">
    <a href="javascript:;" class="button_example" id="result">Result</a>
  </span>
</div>

<div class="codecontainer" id="cssContainer">
  <span class="containerTitle">CSS</span>
  <textarea class="code" id="css"></textarea>
</div>

<div class="codecontainer" id="htmlContainer">
  <span class="containerTitle">HTML</span>
  <textarea class="code" id="html"></textarea>
</div>

<div class="clearfix"></div>

CSS

body {
    font-family: sans-serif;
    font-size: 14px;
}

.button_example {
    display: inline-block;
    background: #ccc;
    border-radius: 3px;
    border: 1px solid #333;
    color: #333;
    padding: 10px 20px;
    text-decoration: none;
}

.button_example:hover {
    background: #aaa;
}

.codecontainer {
    width: 50%;
    float: left;
}

.clearfix {
    clear: both;
}
}

JavaScript

$("a#result").click(nWin);

var cssEditor = CodeMirror.fromTextArea(document.getElementById("css"), {
  lineNumbers: true,
  mode: "text/css",
  matchBrackets: true
});

var htmlEditor = CodeMirror.fromTextArea(document.getElementById("html"), {
  lineNumbers: true,
  mode: "text/html",
  matchBrackets: true
});

function nWin() {
	// Commit the code to the textarea so that it can be extracted using value
    cssEditor.save();
    htmlEditor.save();
	
	var w = window.open();
    $(w.document.head).append("<style>" + $('#css').val() + "</style>");
	$(w.document.body).html($('#html').val() );
}