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);
});