JSFiddle - React, Tailwind, and code Playground

HTML

<span class="cf">hello this is a sentence </span><span id="what" class="cf">jupiter</span><span class="cf"> that changes like this:</span>

CSS

span {
    float: left;
}
#what {
    margin: 0 3px;
}

JavaScript

$(function () {
    var hello = ['jupiter', 'a', 'aklsjdlfajklsdlkf', 'asdf'];
    var used = ['jupiter'];
    var greeting = $('#what');
    var item;

    function hey() {

        item = hello[Math.floor(Math.random() * hello.length)];
        if (hello.length != used.length) {
            while (jQuery.inArray(item, used) != -1) {
                item = hello[Math.floor(Math.random() * hello.length)];
            }
            used.push(item);
        } else {
            used.length = 0;
            item = hello[Math.floor(Math.random() * hello.length)];
            used.push(item);
        }
        greeting.text(item);
        greeting.animate({
            "width": "toggle",
                "opacity": 1
        }, 1500);
    }

    window.setInterval(function () {
        greeting.animate({
            "width": "toggle",
                "opacity": 0
        }, {
            duration: 1500,
            complete: setTimeout(hey, 1500)
        });
    }, 5000);

});