JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<div class="colour">asdksdf sjdf hskdfh skdghskdfskdjfs kdfskdf skdjfsdjfb j</div>

JavaScript

$(document).ready(function() {

        $('.colour').each(function() {
        var text = $(this).text().split(' '),
        normal = generateColors(text),
        animate = generateColors(text);

     $(this).html(normal);

     $(this).animate(function(event) { $(this).html(animate) });

     });
});

function generateColors(characters) {
    var result = "";
    var i = 0;
    for(i=0; i < characters.length; i++) {
        result += "<span style='color:"+getColor()+"'>"+characters[i]+"</span> ";
    }

   return result;
}        

function getColor() {
    var colList = ['#942525', '#9E2921','#A4392A', '#8C381E', '#8E4224', '#7C3E21','#B64B26', '#B75D29', '#7F5B24','#665824','#89782E', '#49411F', '#4E512A', '#5E7D37', '#567D38', '#278C8C', '#387872','#1D6362','#257377', '#257377', '#8D3594'];

    var i = Math.floor((Math.random()*colList.length));
  return colList[i];
}