JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://sgxengine.com/code/lib/js/jquery/jquery-1.11.1.min.js"></script>
<script src="https://sgxengine.com/code/jpjs/jquery.jplayer.min.js"></script>
<script src="https://sgxengine.com/code/sgx/sgx-3.1.15.min.js"></script>
<script src="https://sgxengine.com/code/lib/js/zxjavascript/zx81-0.1.js"></script>
<body onload="SGXPrepare_OS();">
  <canvas id="SGXCanvas" width="200" height="200">
    This browser does not support the HTML5 Canvas.
  </canvas>
</body>

JavaScript

var gVars = {};

function SGXPrepare_OS() {
  gVars.scale = 2;
  gVars.mainSurface = sgxskeleton.init(320 * gVars.scale, 240 * gVars.scale);
}

function SGXinit() {}

function SGXstart() {
  new zx.zx81(gVars.mainSurface, gVars.scale);

  gVars.message_time = 0;
  gVars.message = "...While this is not an attempt to emulate or simulate the ZX81 display, it is a library which can be used to make games in a similar visual style to those retro classics.     ";

  gVars.invertText = false;
  gVars.ready = "ready?";
  gVars.readyInverse = zx.inverse(gVars.ready);
}

function SGXdraw() {

  // We draw zx.system first, which is primarily the border, although it's not strictly necessary
  zx.system.draw();

  // General code, redraw in full each frame
  zx.system.screen.cls();
  // Basic text rendering
  // Note that screen commands can be chained
  zx.system.screen.printAt(2, 4, "Welcome to ZX Javascript");
  zx.system.screen.print();
  zx.system.screen.tab(7).print("By Steven ", zx.SEMICOLON).print("Goodwin");

  zx.system.screen.print();
  for (var i = 0; i < 64; ++i) {
    zx.system.screen.print(zx.chr$(i) + " ", zx.SEMICOLON);
  }
  zx.system.screen.print();
  for (var i = 0; i < 64; ++i) {
    zx.system.screen.print(zx.chr$(i + 64) + " ", zx.SEMICOLON);
  }

  // The flashing is handled automatically by the system
  zx.system.screen.printAt(16, 13, gVars.invertText ? gVars.readyInverse : gVars.ready);

  // The text scroll. The string itself is changed in the update method below
  zx.system.screen.printAt(20, 1, zx.$(gVars.message, zx.TO, 30));

  // A box drawn with mosiac/block graphics
  zx.system.screen.printAt(19, 0, zx.chr$(7));
  zx.system.screen.printAt(19, 31, zx.chr$(68));
  for (var i = 0; i < 30; ++i) {
    zx.system.screen.printAt(19, i + 1, zx.chr$(3));
    zx.system.screen.printAt(21, i + 1, zx.chr$(67));
  }
  zx.system.screen.printAt(20, 0, zx.chr$(5));
  zx.system.screen.printAt(20, 31, zx.chr$(69));
  zx.system.screen.printAt(21, 0, zx.chr$(66));
...