JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title>TheOneRose</title>
<meta charset="utf-8" />
</head>

<body>

    <div id="maincontent">
        Testing changing text color
    
        <div id="message">
        
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
        </div>
    
    </div>    
</body>
</html>

CSS

#maincontent
{
    width: 400px;
    margin: auto;
}

div#message span.blacktext
{
    color: black;
}

div#message span.redtext
{
    -webkit-transition: color 2s ease-out 0s;  /* Saf3.2+, Chrome */
    -moz-transition: color 2s ease-out 0s;  /* FF4+ */
    -ms-transition: color 2s ease-out 0s;  /* IE10? */
    -o-transition: color 2s ease-out 0s;  /* Opera 10.5+ */
    transition: color 2s ease-out 0s;

    color: red;
}

JavaScript

//ColorChanger for text
function colorChanger()
{
    //Get text and choose random word
    var text = $("#message").html();
    var words = ($.trim(text)).split(/\s+/);
    var randomWordIndex = Math.floor(Math.random()*words.length);
    
    //Insert span around word
    var newText = text.split(words[randomWordIndex]).join('<span>' + words[randomWordIndex] + '</span>');
    $("#message").html(newText);
    
    //Request property that requires layout to force a layout 
    var x = $("#message").clientHeight;
    
    //Add class to span
    var newText = newText.split('<span>').join('<span class="blacktext">');
    $("#message").html(newText);
    
    // Change the element from black text to red text, causing the transition
    $('#message .blacktext').removeClass('blacktext').addClass('redtext');

    //Wait before removing span
    setTimeout(function(){changeBack(text);}, 5000);
}

function changeBack(text)
{
    //Remove span. (Maybe need to remove class first in a separate step, as when inserting?)
    $("#message").html(text);
}

$(document).ready(function() {
    setInterval(function(){colorChanger();},10000);
});