JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <h1 id="changingtext">This is <span>changing</span> text</h1>
    </body>

CSS

h1 {
    text-align: center;
    font-family: helvetica, arial, sans-serif;
}

JavaScript

$(function() {
  var t1 = new Array("changing", "dynamic", "cool");
  var i = 0;
  var tid = setInterval(
      function() {
        $("#changingtext span").animate({'opacity': 0}, 1000, function () {
            $(this).text(t1[i]);
        }).animate({'opacity': 1}, 1000);
        
        if(i < t1.length -1) 
            i++;
        else i = 0;
        
      }, 3000 );
    
});