JSFiddle - React, Tailwind, and code Playground

by hobobne

HTML

<div id="wrapper"></div>

JavaScript

(function($) {
    $.fn.kerlimeh = function (name) {
        var container = $('#wrapper');
        var colors = ['#FAB6C7', '#FAA2B8', '#F04A73', '#F26185', '#FC6F92', '#F24E76'];
        var name_length = name.length;
        jQuery.each(name, function (i, character) {
            var color = colors[Math.floor(Math.random() * colors.length)];
            container
                .append(
                    $('<div>' + character + '</div>')
                    .css({
                        'background-color':  color,
                        'font-weight': 'bold',
                        'font-size': 20,
                        'float': 'left',
                        'padding': 10
                    })
                    .hide()
                );
        });
        whenstuffisdone = 0;
        $('#wrapper div').each(function (i) {
            this_delay = 500 * i;
            $(this).delay(this_delay).fadeIn(300);
            whenstuffisdone = whenstuffisdone + this_delay;
        });
        
        setTimeout(function () {
            $('#wrapper div').each(function (i) {
                this_delay = 300 * i;
                $(this).delay(this_delay).animate({
                    'font-size': 30,
                    'padding': 20
                }, 400);
                whenstuffisdone = whenstuffisdone + this_delay;
            });
        }, whenstuffisdone);
        
        setTimeout(function () {
            $('#wrapper').animate({
                marginTop: 200,
                marginLeft: 100
            }, 1000);
        }, whenstuffisdone + 3000);
    };
}) (jQuery);

$('#wrapper').kerlimeh('Kerli');