JSFiddle - React, Tailwind, and code Playground
HTML
<span class="alt-1">helloooo</span><br />
<span class="alt-1">Nice to meet you</span><br />
<span class="alt-1">Yea welcome..</span>
JavaScript
$( function() {
$( 'span.alt-1' ).each( function() {
var firstColor = 'red'; // Set the first colour
var secondColor = 'green'; // Set the second
var count = 1; // Start the count for alternating colours
var div = $( this ); // Store it for later use
var text = $( div ).text(); // Store the text
$( div ).html( '' ); // Clear it first
$.each( text.split( '' ), function( index, value ) {
if( count % 2 == 0 ) { // If even, set the first colour else second
$( div ).append( '<font color="' + firstColor + '">' + value + '</font>' );
} else {
$( div ).append( '<font color="' + secondColor + '">' + value + '</font>' );
}
count++;
} );
} );
} );