JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <canvas id="rect" width="2000" height="300">
        <script type="text/javascript">
        var width = 50;
        var height = 75;
        var animateHeight = 250;
        var animRate = 1;
        var xOffset = 15;
        var yOffset = 15;
        var glowIterations = 5;
        var glowArr = new Array();

        for(i=0; i<=glowIterations; i++)
        {
          glowArr.push(Math.random()*7);
        }
   
        function animate()
        {
          reqAnimFrame = window.mozRequestAnimationFrame    ||
                window.webkitRequestAnimationFrame ||
                window.msRequestAnimationFrame     ||
                window.oRequestAnimationFrame
                ;

          reqAnimFrame(animate);

          height += animRate;

          if(height < animateHeight){
            draw_main();
            draw_glow();
          }
        }

        function draw_glow()
        {
          canv = document.getElementById("rect");
          context = canv.getContext("2d");

           for(i=0; i<=glowIterations; i++)
          {
            context.save();
            context.setTransform(1,0,0,1,0,0);
            context.clearRect(xOffset - (glowArr[i] / 2), yOffset - (glowArr[i] / 2), width + glowArr[i], height + glowArr[i]);
            context.beginPath();
            context.strokeRect(xOffset - (glowArr[i] / 2), yOffset - (glowArr[i] / 2), width + glowArr[i], height + glowArr[i]);
            context.lineWidth = glowArr[i];
            context.strokeStyle = 'rgba(0,255,0,0.2)';
            context.stroke();
          }
        }

        function draw_main()
        {
          canv = document.getElementById("rect");
          context = canv.getContext("2d");

          context.save();
          context.setTransform(1,0,0,1,0,0);
          context.clearRect(xOffset, yOffset, width, height);
          context.beginPath();
          context.strokeRect(xOffset, yOffset, width, height);
          context.linewidth = 10;
         ...