JSFiddle - React, Tailwind, and code Playground
HTML
<span>header</span>
<br />
<div class="logo">
weterteyrtutyu<span class="rainbow_text" >sergey kalinin 123</span>wqeqweqwqrvdg
</div>
<br />
<span class="rainbow_text" >qwerty asdf zxzx</span>
<br />
<span>footer</span>
<br />
<span class="rainbow_text" >qzx</span>
JavaScript
function KalininRainbowText(options){
// ------------------------------------------------------------------------------------------ properties ---------
var self = options.element,
colorArray = options.colorArray || new Array('#974bff', '#ec11a1', 'navy', 'orange', '#ecb111', 'magenta', '#055d12', '#4bb1ff'),
colorArrayLength = options.colorArray.length,
text = self.innerHTML,
textLength = text.length;
init();
// ------------------------------------------------------------------------------------------ methods ------------
function init(){
self.innerHTML =colorize(textLength, text);
}
function colorize(textLength, text){
var newText = '',
colorLetter,
i;
for(i = 0; i < textLength; i++){
newText += '<span style="color: ' + (options.colorArray[Math.floor(Math.random() * (colorArrayLength))]) + '">' + text.substr(i, 1) + '</span>';
}
return newText;
}
// ------------------------------------------------------------------------------------------ handlers -----------
// ------------------------------------------------------------------------------------------ events -------------
}
new KalininRainbowText({
element: document.getElementsByClassName ('rainbow_text')[0],
colorArray: new Array('red', 'lime', 'blue', 'navy', 'green', 'magenta', '#883f46', '#4bb1ff')
});
new KalininRainbowText({
element: document.getElementsByClassName ('rainbow_text')[1],
colorArray: new Array('red', 'lime', 'blue', 'navy', 'green', 'magenta', '#883f46', '#4bb1ff')
});
new KalininRainbowText({
element: document.getElementsByClassName ('rainbow_text')[2],
colorArray: new Array('red', 'lime', 'blue', 'navy', 'green', 'magenta', '#883f46', '#4bb1ff')
});