JSFiddle - React, Tailwind, and code Playground

HTML

<p id='container'></p>

CSS

#container {
  outline: 3px solid green;
  display: block;
  margin: auto;
  margin-top: 100px;
  width: 175px;
  text-align: center;
}

.item > span {
  background: tomato;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  outline: 2px solid blue;
  padding: 4px;
}

.item {
  display: inline;
}

.item::before {
  content: ' ';
  font-size: 0;
  padding: 0;
  margin: 0;
  outline: none;
}

.item:last-child::before {
  content: '';
}

JavaScript

f = (x) => {
  e = document.createElement('span');
  e.className = 'item';
  document
    .getElementById('container')
    .appendChild(e);
   e = document.createElement('span');
   e.textContent = x;
   document
     .getElementById('container')
     .lastChild
     .appendChild(e);
  if (x < 9) { setTimeout(() => f(++x), 1000); }
}

f(1);