JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="200px" height="200px"></canvas>

CSS

</style> 
<script type="text/javascript">
    window.addEventListener('load',function() {
    var scripts = document.body.getElementsByTagName('script');
    var canvases = document.body.getElementsByTagName('canvas');
    new Processing(canvases[0],scripts[0].text);
}, false);
// Here prevent javascript in body from throwing error
</script>
<style>

JavaScript

/**
 * TextBox Writer (v2.36+)
 * by  Inarts (2013/Oct)
 * mod GoToLoop & PhiLho
 *
 * forum.processing.org/two/discussion/423/how-to-write-a-class-for-text-area-without-using-any-library
 */
 
final static int NUM = 2;
final static TextBox[] tboxes = new TextBox[NUM];
 
void setup() {
  size(640, 480);
  frameRate(20);
  smooth();
 
  rectMode(CENTER);
 
  instantiateBoxes();
}
 
void draw() {
  background(#778C85);
  noStroke();
  fill(random(255), random(255), random(255));
  rect(random(width / 4, 3 * width / 4), random(height / 4, 3 * height / 4), random(width / 4), random(height / 4));
 
  for (TextBox tb : tboxes)
    tb.display();
}
 
void mouseClicked() {
  for (TextBox tb : tboxes)
    tb.checkFocus();
}
 
void keyTyped() {
  for (TextBox tb : tboxes)
    tb.keyTyped();
}
 
void keyPressed() {
  for (TextBox tb : tboxes)
    tb.keyPressed();
}
 
static final int findFocusedIndex() {
  for (int i = 0; i != NUM; ++i)   if (tboxes[i].isFocused)   return i;
  return -1;
}
 
void instantiateBoxes() {
  tboxes[0] = new TextBox(
      width/4, height/4 + height/16, // x, y
      width - width/2, height/2 - height/4 - height/8, // w, h
      215, // lim
      0300 << 030, color(-1, 040), // textC, baseC
      color(-1, 0100), color(#FF00FF, 0200)); // bordC, slctC
 
  tboxes[1] = new TextBox(
      width/8, height/2 + height/8, // x, y
      width - width/4, height - height/2 - height/4, // w, h
      640, // lim
      0300 << 030, color(-1, 040), // textC, baseC
      color(-1, 0100), color(#FFFF00, 0200)); // bordC, slctC
}
 
class TextBox {
  final color textC, baseC, bordC, slctC;
  final int x, y, w, h, xw, yh, lim;
 
  boolean isFocused;
  String txt = "";
 
  TextBox(int xx, int yy, int ww, int hh, int li,
      color te, color ba, color bo, color se) {
    x = xx;
    y = yy;
    w = ww;
    h = hh;
 
    lim = li;
 
    xw = x + ww;
    yh = yy + hh;
 
    textC = te;
    baseC = ba;
    bordC = bo;
    slctC = se;
  }
 
  void display() {
   ...