JSFiddle - React, Tailwind, and code Playground

HTML

<div class="center">    
<h1 id="cfs">Charles Samet</h1>
    <p class="intro">
        <span id="fade1">Husband.</span>
        <span id="fade2">  Father.</span>
        <span id="fade3">  Computer Geek.</span>
        <span id="fade4">  Welcome to my world...</span>
    </p>
</div>
<button>Fade in</button>

CSS

.center {text-align:center}
#fade1, #fade2, #fade3, #fade4 {opacity: 0; font-size:125%;}
#cfs {opacity: 0;}

JavaScript

function go(){
    $('#cfs').animate({opacity: 1}, 2500);
    $('#fade1').delay(3000).animate({opacity: 1}, 2000);
    $('#fade2').delay(5000).animate({opacity: 1}, 2000);
    $('#fade3').delay(7000).animate({opacity: 1}, 2000);
    $('#fade4').delay(9000).animate({opacity: 1}, 2000);      
}

$('button').click(go);