JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu-board">
    <span class="board one">
        <div class="row">1.1</div>
        <div class="row">1.2</div>
        <div class="row">1.3</div>
    </span>
    <span class="board two">
        <div class="row">2.1</div>
        <div class="row">2.2</div>
        <div class="row">2.3</div>
    </span>
    <span class="board three">
        <div class="row">3.1</div>
        <div class="row">3.2</div>
        <div class="row">3.3</div>
    </span>
</div>

CSS

.board {
    display: inline-block;
    border: solid black 1px;
    width: 50px;
}

.row {
    display: none;
}

JavaScript

$(document).ready(function(){

        Board1 = function(callback){
            $('#menu-board .board.one .row').slideDown(800).delay(1000).slideUp(800).promise().done(callback);
        }
        Board2 = function(callback){
            $('#menu-board .board.two .row').slideDown(800).delay(1000).slideUp(800).promise().done(callback);
        }
        Board3 = function(){
            $('#menu-board .board.three .row').slideDown(800).delay(1000).slideUp(800);
        }

        Board1(function() {
            Board2(Board3);
        }); 

});