JSFiddle - React, Tailwind, and code Playground

by Wil Chow

HTML

<div class="text">
</div>

CSS

.text {
        position: fixed;
        bottom: 0;
        left: 20px;
        min-height: 100%;
        width: calc(100% - 40px);
        color: #fff;
        font-family: Verdana, Verdana, Geneva, sans-serif;
    }
    
body {
        background-color: #172f6a; 
    }

JavaScript

$(function (){    
    
    	var str = "It was a dark and stormy night in the Bay of Biscay, and the Captain and his sailors were seated around the fire. Suddenly, one of the sailors said, Tell us a story, Captain. And the Captain began, ";
	
    	var spans = '<span>' + str.split(/\s+/).join(' </span><span>') + '</span>';
        
    	$(spans).hide().appendTo('.text').each(function(i){
    	    $(this).delay(100 * i).fadeIn(100);
            
    	});
        
        
        });