JSFiddle - React, Tailwind, and code Playground

HTML

<b>結構重いですね。表示に時間かかります</b>

CSS

* { margin: 0; padding: 0; }
html {
	height: 100%;
}
body {
	color: #fff;
	font-size: 16px;
	background-image: url(https://unsplash.it/1000/800/?random);
	background-size: cover;
	background-position: 50% 0;
	height: 100%;
	text-align: center;
}
body:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
b {
  padding:15px;
width:100%;
background:rgba(0,0,0,0.6);
}

JavaScript

/**
 * jQuery Ripples plugin v0.4.3 / http://github.com/sirxemic/jquery.ripples
 * MIT License
 * @author sirxemic / http://sirxemic.com/
 */

+ function($) {

    var gl;
    var $window = $(window); // There is only one window, so why not cache the jQuery-wrapped window?

    function isPercentage(str) {
        return str[str.length - 1] == '%';
    }

    function hasWebGLSupport() {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
        var result = context && context.getExtension('OES_texture_float');
        return result;
    }

    var supportsWebGL = hasWebGLSupport();

    function createProgram(vertexSource, fragmentSource, uniformValues) {
        function compileSource(type, source) {
            var shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                throw new Error('compile error: ' + gl.getShaderInfoLog(shader));
            }
            return shader;
        }

        var program = {};

        program.id = gl.createProgram();
        gl.attachShader(program.id, compileSource(gl.VERTEX_SHADER, vertexSource));
        gl.attachShader(program.id, compileSource(gl.FRAGMENT_SHADER, fragmentSource));
        gl.linkProgram(program.id);
        if (!gl.getProgramParameter(program.id, gl.LINK_STATUS)) {
            throw new Error('link error: ' + gl.getProgramInfoLog(program.id));
        }

        // Fetch the uniform and attribute locations
        program.uniforms = {};
        program.locations = {};
        gl.useProgram(program.id);
        gl.enableVertexAttribArray(0);
        var name, type, regex = /uniform (\w+) (\w+)/g,
            shaderCode = vertexSource + fragmentSource;
        while ((match = regex.exec(shaderCode)) != null) {
            name = match[2];
           ...