JSFiddle - React, Tailwind, and code Playground

JavaScript

/**
 * @class Lightning
 * @author Kevin Sweeney <[email protected]>
 * @license http://www.apache.org/licenses/LICENSE-2.0
 *
 * @constructor
 * @param {Element} el The element to apply the 
 *     lightning effect to (defaults to body).
 */
function Lightning(el) {
    var source_el = el || document.body,
          source_style = source_el.style,
          source_bg_color = '#000',
          flash_bg_color = '#ddd',
          flash_delay = 60, // milliseconds
          min_delay = 5, // seconds
          max_delay = 12, // seconds
          min_flashes = 2,
          max_flashes = 3,
          flash_count = -1;

    function randomDelay() {
        var delay = 1000 * (min_delay + (Math.floor(Math.random() * (max_delay - min_delay + 1))));
        return delay;
    }

    function flashOn() {
        source_style.backgroundColor = flash_bg_color;
    }

    function flashOff() {
        source_style.backgroundColor = source_bg_color;

        if (--flash_count > 0) {
            setTimeout(flash, flash_delay);
        }
        else {
            setTimeout(lightningStrike, randomDelay());
        }
    }

    function flash() {
        flashOn();
        setTimeout(flashOff, flash_delay);
    }

    function lightningStrike() {
        flash_count = min_flashes + Math.floor(Math.random() * (max_flashes - min_flashes + 1));
        flash();
    }

    setTimeout(lightningStrike, randomDelay());
}

var lightning_storm = new Lightning();