JSFiddle - React, Tailwind, and code Playground

HTML

<div class="textflip">
    <p class="text-center"></p>
</div>

CSS

.textflip p {
    font:58px/53px'Arial';
    width:30%;
    text-align:left;
    float:left;
    margin:11.2% auto;
    z-index:300;
    color:black
}

JavaScript

var str = "0110 1101 1111 0100111";
 var str2 = "Live life king size...";
 for (var i = 0; i < str.length; i++) {
     $('.textflip p').append('<span>' + str[i] + '</span>');
 }

 var halt = 75;
 var j = 0;

 var count = $('.textflip p').children('span').length;
 anim();

 function anim() {
     var n = j;
     var r = Math.floor((Math.random() * count) + 1);

     $('.textflip p > span').eq(n).animate({
         opacity: 0
     }, halt, function () {

         $('.textflip p > span').eq(n).text(str2[n]).css('opacity', 1);
         if (j <= str.length) {
             anim();

         }

     });

     j++;
 }