JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://processing.org/javascript/processing.js"></script>
<script type="application/processing">
int barWidth = 20; 
int lastBar = -1; 
 
void setup() { 
  size(640, 460); 
  colorMode(HSB, width, 100, width); 
  noStroke(); 
  background(0); 
} 
 
void draw() { 
  int whichBar = mouseX / barWidth; 
  if (whichBar != lastBar) { 
    int barX = whichBar * barWidth; 
    fill(barX, 100, mouseY); 
    rect(barX, 0, barWidth, height); 
    lastBar = whichBar; 
  } 
}
</script><canvas width="640" height="360"></canvas>