JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.appmalt.info/CodeMirror/lib/codemirror.js"></script>
<script src="http://www.appmalt.info/CodeMirror/mode/xml/xml.js"></script>
<script src="http://www.appmalt.info/CodeMirror/mode/javascript/javascript.js"></script>
<script src="http://www.appmalt.info/CodeMirror/mode/css/css.js"></script>
<script src="http://www.appmalt.info/CodeMirror/mode/htmlmixed/htmlmixed.js"></script>
<link rel="stylesheet" href="http://www.appmalt.info/CodeMirror/lib/codemirror.css">
<link rel="stylesheet" href="http://www.appmalt.info/CodeMirror/doc/docs.css">
<textarea id='html'><button>Click</button></textarea><br/><br/>
<textarea id='css'>button {width:100%;background-color:yellow;font-size:2em;}</textarea><br/><br/>
<iframe id='preview'></iframe>

CSS

iframe {width:100%;height:300px;border:1px solid black;}
div {background-color:#dbdbdb;}

JavaScript

$(document).ready(function() {
    
    //Create and append STYLE element
    var preview = document.getElementById('preview');
		var mypreview = preview.contentDocument;
		mypreview.open();
		mypreview.close();
    
		
    preview.onload = function() {
        var style = document.createElement('style');
            style.id = 'mycssid';
            style.type ='text/css';
            mypreview.head.appendChild(style);
    }
		
	//CodeMirror. Changes the Textarea into a CodeMirror HTMLmixed plugin		
	 var editor = CodeMirror.fromTextArea(document.getElementById('html'), {
        mode: 'text/html',
        tabMode: 'indent'
      });
	  
    //Same as above. I believe I'm creating a separate plugin for CSS text
	  var CSSeditor = CodeMirror.fromTextArea(document.getElementById('css'), {
        mode: 'text/css',
        tabMode: 'indent'
      });
	
    //When HTML changes - run the function updatePreviewHTML
      editor.on("change", function() {
        clearTimeout(delay);
        var delay = setTimeout(updatePreviewHTML, 300);
      });
        
     //When CSS changes - run the function updatePreviewCSS
	  CSSeditor.on("change", function() {
        clearTimeout(delay);
        var delay = setTimeout(updatePreviewCSS, 300);
      });
	  
     //Finds the iframe. opens it. writes the html text to it. closes it.
      function updatePreviewHTML() {
        var previewFrame = document.getElementById('preview');
        var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
        preview.open();
        preview.write(editor.getValue());
        preview.close();
      }
	  
      setTimeout(updatePreviewHTML, 300);
	  
     //Finds the iframe. appends the css text to the 'style' tag which as an id='mycssid'
	  function updatePreviewCSS() {
		var previewFrame = document.getElementById('preview');
        var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
		var mycss = CSSeditor.getValue();
       ...