JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- <script src="lib/gl-matrix.js"></script> -->
</head>
<body>
<canvas id="wu" style="border: none;" width="640" height="640"></canvas>

<script id="vshader" type="x-shader/x-fragment">

  attribute vec2 aVertexPosition;

  void main() {
    gl_Position = vec4(aVertexPosition, 0, 1);
  }

</script>

<script id="fshader" type="x-shader/x-fragment">
  // setup precision for float type
  #ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
  #else
    precision mediump float;
  #endif
  precision mediump int;
  
  uniform vec2 uCanvasSize;

  // user controlled offset
  uniform vec2 uOffset;
  // user controlled scale
  uniform float uScale;

  vec4 calc(vec2 texCoord){
    float x = 0.0; 
    float y = 0.0;

    // f(x) = x^2 + c
    // let c = x + yi, a complex number. i is the imaginary number. x and y is components of texture coordinate
    // f(c) = (x + yi)^2 + x + yi = x^2 + 2*x*y*i - y^2 + x + yi 
    //      = (x^2 - y^2 + x) + (2*x*y + y)i
    // plot the function to the complex plane( just a 2D plane, whose x axis is the real number part, y axis is imaginery part of the complex number)

    for(int i=0; i<400; ++i){
      float tempX = x*x - y*y + texCoord.x;
      y = 2.0*x*y + texCoord.y;
      x = tempX;

      // if the plot x + yi radius is greater than 2(it can be arbitrary number greater or equal to 4.0, otherwise the plots will be 'chopped').
      // If it is greater than 2, the f(x) = x^2 + c could grow exponentially, therefore it is not in the Mandelbrot set.
      // we can colour it depending on the speed of growth
      if(x*x+y*y >= 16.0) {
        // float d = float(i)/50.0;
        float d = (float(i) - (log(log(sqrt(x*x+y*y))) / log(2.0))) / 50.0;

        // just a kind of green colour
        return vec4(d/1.6,d,d/2.3, 1);
      }
    }

    return vec4(0, 0, 0, 1);
  }

  void main() {
    vec2 texCoord = (gl_FragCoord.xy / uCanvasSize.xy) * 2.0 - vec2(1.0, 1.0);
    texCoord =...