JSFiddle - React, Tailwind, and code Playground

by yijiang

HTML

<div id="oy"></div>

CSS

#oy span, #oy em, #oy strong {
    padding: 3px 12px 5px;
    display: inline-block;
    vertical-align: middle;
}

#oy em {
    font-style: italic;
}

#oy strong {
    font-weight: bold;
}

body {
    overflow: hidden;
}

JavaScript

var oys = [],
    html = ['oy', 'oy', 'oy', 'Oy', 'Oy', 'Oy!', 'oy!', 'oy.'],
    tag = ['<span>', '<span>', '<span>', '<span>', '<span>', '<span>', '<strong>', '<strong>', '<em>'],
    colors = ['#426F9B', '#81CE39', '#333', 'orange', '#922828'];

function randomize(choice) {
    return choice[Math.floor(choice.length * Math.random())];
}

for (var i = 0; i < 50; i++) {
    oys.push($(randomize(tag), {
        html: randomize(html)
    }).css({
        color: randomize(colors),
        fontSize: 12 + Math.floor(Math.random() * 12)
    }).appendTo('#oy'));
}

setInterval(function() {
    for (var i = 0; i < oys.length; i++) {
        if (Math.random() > 0.2 && !oys[i].is(':animated')) {
            oys[i].fadeTo(500, (Math.random() * 0.4 + 0.3), function() {
                $(this).delay(300).fadeTo(500, 1);
            });
        }
    }
}, 500);