JSFiddle - React, Tailwind, and code Playground

by jcutrell

HTML

<div class="whoa">
▣▤▥▦⬚▧▨▩
</div>
<div class="whoa">
⟐◇◆⬖⬗⬘⬙
</div>
<div class="whoa">
⌞⌟⌜⌝⌊⌋⌈⌉⌋┌┍┎┏┐┑┒┓└┕┖┗┘┙┚┛├┝┞┟┠┡┢┣┤┥┦
</div>

CSS

.whoa {
    font-size: 4em;
    width: 200px;
    height: 100px;
}

JavaScript

var w = $(".whoa");
w.each(function(i,el){
    var cArr = $.trim($(el).html()).split("");
    var count = 0;
    var max = cArr.length - 1;
    console.log(cArr);
    setInterval(function(){
            var c = cArr[count];
            var ranCol = '#'+Math.floor(Math.random()*16777215).toString(16);
            $(el).html(c).css({
            color : ranCol
        });
        if (count == max){
            count = 0;
        } else {
            count++;
        }
    }, 100);

});