JSFiddle - React, Tailwind, and code Playground

HTML

<div id="log"></div>

JavaScript

// fragment shader source
var fragmentShaderSource = [
    'precision mediump float;',
    'varying vec2 a;',
    'uniform sampler2D c;',  // uniform "c" conflicts with attribute "c" below
    'void main() {',
    '    gl_FragColor = texture2D(c, a);',
    '}'
].join('\n');

// vertex shader source
var vertexShaderSource = [
    'varying vec2 a;',
    'attribute vec2 c, d;',  // attribute "c" conflicts with uniform "c" above
    'uniform vec4 b;',
    'void main() {',
    '    gl_Position = vec4(c * b.xy + b.zw, 0, 1);',
    '    a = d;',
    '}'
].join('\n');

// a simple logging system
var logDiv = document.getElementById('log');
var log = function(object) {
    var p = document.createElement('p');
    p.innerText = object.toString();
    logDiv.appendChild(p);
};

// get a WebGL context
var canvas = document.createElement('canvas');
var gl = canvas.getContext('webgl');
if (gl === null) {
    gl = canvas.getContext('experimental-webgl');
}

// compile fragment shader
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
log('fragment shader compile status = ' + gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS));
log('fragment shader info log = ' + gl.getShaderInfoLog(fragmentShader));

// compile vertex shader
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
log('vertex shader compile status = ' + gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS));
log('vertex shader info log = ' + gl.getShaderInfoLog(vertexShader));

// link program
var program = gl.createProgram();
gl.attachShader(program, fragmentShader);
gl.attachShader(program, vertexShader);
gl.linkProgram(program);
log('program link status = ' + gl.getProgramParameter(program, gl.LINK_STATUS));
log('program info log = ' + gl.getProgramInfoLog(program));