JSFiddle - React, Tailwind, and code Playground

HTML

<div class="notificontainer" id="notificontainer">
</div>

CSS

.notificontainer {
  position: fixed;
  border: 1px solid blue;
  width: 40vw;
  height: 20px;
  left: 30%;
  bottom: 10px;
}

.notification {
  display: none;
  transition: visibility .5s;
  position: absolute;
  border: 1px solid #44DDFF;
  background-color: rgb(0, 0, 0);
  width: 50%;
  height: auto;
  padding: 0;
  left: 25%;
  bottom: 0px;
  color: #ffffff;
}

.tooltipheader {
	margin: 0px;
	padding: 2%;
	text-align: center;
	border-bottom: 1px groove #949494;
	background-color: rgba(165,165,175, .1);
}

JavaScript

var counted = 0;

notification("Hi world1");
notification("Hi world2");
notification("Hi world3");
notification("Hi world4");

function notification(what) {
  counted++;
  var elem = document.getElementById("notificontainer");

  elem.innerHTML += "<div class=\"notification\" id=\"noty" + counted + "\"><div class=\"tooltipheader\">" + what + "</div></div>";
  document.getElementById("noty" + counted).style.bottom = counted * 40 + "px";
  document.getElementById("noty" + counted).style.display = "initial";

  var id = "clear" + counted + "()";

  window.setTimeout("clear" + counted, 1000);
}