JSFiddle - React, Tailwind, and code Playground

HTML

<div data-delay="500">1</div>
<div data-delay="3000">2</div>
<div data-delay="1500">3</div>
<div data-delay="4500">4</div>

CSS

div {
    position: absolute;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    font-size: 5em;
    background: #999;
    text-shadow: 0 0 2px #ffffff;
}
div:nth-of-type(2){
    right: 0;
}
div:nth-of-type(3){
    right: 0;
    bottom: 0;
}
div:nth-of-type(4){
    bottom: 0;
}

JavaScript

;(function($){
	$.fn.fadeInDelay = function(){
    	var init = function(){
        	$(this).hide().delay($(this).data('delay')).fadeIn();
        };
    	return this.each(init);
    };
}(jQuery));

$('div').fadeInDelay();