JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<link rel="stylesheet" href="http://codemirror.net/addon/hint/show-hint.css">
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/addon/hint/javascript-hint.js"></script>
    <form>
           <textarea id="code" name="code"></textarea>
        </form>

JavaScript

var timeout;

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true
});

editor.on("inputRead", function(cm) {
    if(timeout) clearTimeout(timeout);
    timeout = setTimeout(function() {
        CodeMirror.showHint(cm, CodeMirror.hint.javascript, {completeSingle: false});
    }, 150);
});

editor.on("keyup", function(cm, event) {    
    var keyCode = event.keyCode || event.which;
    if(keyCode == 8 || keyCode == 46){
        if(timeout) clearTimeout(timeout);        
        timeout = setTimeout(function() {
            CodeMirror.showHint(cm, CodeMirror.hint.javascript, {completeSingle: false});
        }, 150);       
    }
});


(function() {
  "use strict";

  CodeMirror.showHint = function(cm, getHints, options) {
    // We want a single cursor position.
    if (cm.somethingSelected()) return;
    if (getHints == null) getHints = cm.getHelper(cm.getCursor(), "hint");
    if (getHints == null) return;

    if (cm.state.completionActive) cm.state.completionActive.close();

    var completion = cm.state.completionActive = new Completion(cm, getHints, options || {});
    CodeMirror.signal(cm, "startCompletion", cm);
    if (completion.options.async)
      getHints(cm, function(hints) { completion.showHints(hints); }, completion.options);
    else
      return completion.showHints(getHints(cm, completion.options));
  };

  function Completion(cm, getHints, options) {
    this.cm = cm;
    this.getHints = getHints;
    this.options = options;
    this.widget = this.onClose = null;
  }

  Completion.prototype = {
    close: function() {
      if (!this.active()) return;
      this.cm.state.completionActive = null;

      if (this.widget) this.widget.close();
      if (this.onClose) this.onClose();
      CodeMirror.signal(this.cm, "endCompletion", this.cm);
    },

    active: function() {
      return this.cm.state.completionActive == this;
    },

    pick: function(data, i) {
      var completion = data.list[i];
      if...