JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slide-01" class="slides">Testing testing 123
</div>

<div id="slide-02" class="slides">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.</div>

<div id="wrap"><div id="button">→</div></div>

CSS

.slides {
    top: 200px;
    position: absolute;
    font-size: 30px;
    text-align: center;
    font-family: Garamond, serif;
    width: 500px;
    left: 50%;
    margin-left: -250px;
    z-index: 9998;
}

#button {
    position: absolute;
}

#wrap {
    position: fixed;
    width: 100%;
    bottom: 20px;
    left: 50%;
    cursor: pointer;
    z-index: 9999;
}

JavaScript

$(document).ready(function(){
    $('#slide-02').hide();

    $('#button').click(function(){
        $('#slide-02').fadeIn(1000);
        $('#slide-01').hide();
        var charToReplace = ['s', 'b', 'S', 'B'];
        $('#slide-02').html(function (i, v) {
            var resultStr = '';
            for (var i = 0; i < v.length; i++ ) {
                var ch = v.charAt(i);
            
                if ($.inArray(ch, charToReplace) >= 0) {
                   resultStr += '<span class="hideMe">' + ch + '</span>';  
                } else {
                   resultStr += ch;
                }
            }
            return resultStr;
        }).find('.hideMe').delay(2000).fadeOut(3000, function(){
            $(this).css('opacity', 0).show();            
        });
    
        //lets bring it all back
        setTimeout(function () {
            $('#slide-02').find('.hideMe').css('opacity', 0);
        }, 5000);
    });
});