JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a">
  <div style="height:20px"></div>
</div>

CSS

#a{
  width:200px;
  background-color:salmon;
  margin:0px;
  padding:0px;
  height:200px;
  overflow: auto;
}

#a .item{
  margin:0px 5px;
  background-color:teal;
  padding:10px;
  color:white;
  opacity:0;
  transition:opacity .5s ease-in-out;
}

JavaScript

function add(){

  var div = document.createElement("div");
  div.className ="item";
  var newtext = document.createTextNode("aa");
  div.appendChild(newtext);
  document.querySelector("#a").appendChild(div);
  
  
  var separator = document.createElement("div");
  separator.style.height="10px";
  document.querySelector("#a").appendChild(separator);
  
  
  //apply opacity
  div.style.opacity=1;
  
  
}
setInterval(add,3000);