JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="explode_text" value="Foo" />

<div id="explode_container"></div>

JavaScript

var explode = $('#explode_text').val(),
    container = $('#explode_container'),
    getRandomInt,
    len = explode.length,
    i;

/*
 * From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
 */
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

for (i = 0; i < len; i += 1) {
    container.append(
        $('<span />').text(explode.charAt(i))
    );
}

container.children('span').each(function () {
    $(this)
        .css('position','relative')
        .animate({
            opacity: '0.5',
            left: getRandomInt(0, 250) +'px',
            top: getRandomInt(0, 250) +'px',
            bottom: getRandomInt(0, 500) +'px'
        });
});