JSFiddle - React, Tailwind, and code Playground

JavaScript

var PjsConsole = function () {
      var e = {};
      e.wrapper = document.createElement("div");
      e.wrapper.setAttribute("style", "opacity:.75;display:block;position:fixed;bottom:0px;left:0px;right:0px;height:50px;background-color:#aaa");
      e.dragger = document.createElement("div");
      e.dragger.setAttribute("style", "display:block;border:3px black raised;cursor:n-resize;position:absolute;top:0px;left:0px;right:0px;height:5px;background-color:#333");
      e.closer = document.createElement("div");
      e.closer.onmouseover = function () {
          e.closer.style.setProperty("background-color", "#ccc")
      };
      e.closer.onmouseout = function () {
          e.closer.style.setProperty("background-color", "#ddd")
      };
      e.closer.innerHTML = "✖";
      e.closer.setAttribute("style", "opacity:.5;display:block;border:3px black raised;position:absolute;top:10px;right:30px;height:20px;width:20px;background-color:#ddd;color:#000;line-height:20px;text-align:center;cursor:pointer;");
      e.javaconsole = document.createElement("div");
      e.javaconsole.setAttribute("style", "overflow-x: auto;display:block;position:absolute;left:10px;right:0px;bottom:5px;top:10px;overflow-y:scroll;height:40px;");
      document.body.appendChild(e.wrapper);
      e.wrapper.appendChild(e.dragger);
      e.wrapper.appendChild(e.javaconsole);
      e.wrapper.appendChild(e.closer);

      e.dragger.onmousedown = function (t) {
          e.divheight = e.wrapper.style.height;
          if (document.selection) document.selection.empty();
          else window.getSelection().removeAllRanges();
          var n = t.screenY;
          window.onmousemove = function (t) {
              e.wrapper.style.height = parseFloat(e.divheight) + (n - t.screenY) + "px";
              e.javaconsole.style.height = parseFloat(e.divheight) + (n - t.screenY) - 10 + "px"
          };
          window.onmouseup = function (t) {
              if (document.selection)...