JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list">
    <li>1:1</li>
    <li>1:2</li>
    <li>1:3</li>
    <li>2:1</li>
    <li>2:2</li>
    <li>2:3</li>
    <li>3:1</li>
    <li>3:2</li>
    <li>3:3</li>
</ul>

CSS

ul {
    position:relative;
    width:150px;
    height:150px;
    border:1px solid #F00;
}
ul > li {
    position:absolute;
    left:50px;
    top:50px;
    width:50px;
    height:50px;
    background:#FC0;
    -webkit-transition:all 0.5s 0s ease-in-out;
    -moz-transition:all 0.5s 0s ease-in-out;
}

ul > li:nth-child(1){-webkit-transition-delay:0.25s; -moz-transition-delay:0.25s; z-index:9;}
ul > li:nth-child(2){-webkit-transition-delay:0.50s; -moz-transition-delay:0.50s; z-index:8;}
ul > li:nth-child(3){-webkit-transition-delay:0.75s; -moz-transition-delay:0.75s; z-index:7;}
ul > li:nth-child(4){-webkit-transition-delay:1.00s; -moz-transition-delay:1.00s; z-index:6;}
ul > li:nth-child(5){-webkit-transition-delay:2.25s; -moz-transition-delay:2.25s;z-index:1;}
ul > li:nth-child(6){-webkit-transition-delay:1.25s; -moz-transition-delay:1.25s; z-index:5;}
ul > li:nth-child(7){-webkit-transition-delay:1.50s; -moz-transition-delay:1.50s; z-index:4;}
ul > li:nth-child(8){-webkit-transition-delay:1.75s; -moz-transition-delay:1.75s; z-index:3;}
ul > li:nth-child(9){-webkit-transition-delay:2.00s; -moz-transition-delay:2.00s; z-index:2;}

body.ready ul > li:nth-child(2n){background:#CF0;}
body.ready ul > li:nth-child(1n){top:0px;}
body.ready ul > li:nth-child(1n+4){top:50px;}
body.ready ul > li:nth-child(1n+7){top:100px;}

JavaScript

// Put this JS in a <script> tag right before
// the above the end </body> at the bottom of your HTML

document.body.className += ' ready';