JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

CSS

html, body {height: 100%;margin: 0;}

body, .test {
  display: flex;
  flex-direction: column;
}
.test {
  flex:1;
  border-bottom: 1px solid #900;
}

JavaScript

var post = document.getElementsByClassName("test");
var tailleTableau = post.length;

for (i = 0; i < tailleTableau; i++) (function(i) {
	setTimeout(function() {
  	post[i].style.background = "red";
	}, 500 * (i+1));
}(i));