JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">

<div class="main">
    <div class="parent">
        <span>Testing1</span>
        <span>Testing2</span>
        <span>Testing3</span>
    </div>
    <button>Click Me</button>
</div>
</div>

CSS

div.wrapper {

    position:relative
}

div.main {
    position:relative;
    border : 1px solid green;
    height : 300px;
}

div.main > div
{
position:absolute;
top:0px;
left:30px;
width:20%;
height:10px;
background:red;
-webkit-transition:height 2s; 
}

div.main > div.active
{
height:200px;
}

div > div > span {
    opacity :0;
    display:block;
}



div span {
    opacity:0;
    -webkit-transition:opacity 2s; 
}
div.active span.fadeIn {
    opacity:1;
    -webkit-transition:opacity 2s; 
}

button {
    position:absolute;
    right:0;
    top: 0;
}

JavaScript

$('button').click(function () {

    $('.parent').toggleClass('active');
    
    $('.parent').on('animationend webkitTransitionEnd', function() {
				$('span').each(function (i) {
                    $(this).delay(i*1000).queue(function (next) {
                        $(this).addClass('fadeIn');
                        next(); //used just to dequeue
                    });
                });
			})
    
});