JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <ul class="slidepush">

  </ul>
</div>

CSS

div {
--w: 200px;
  max-width: var(--w);
}


.slidepush {
  list-style: none;
  border: 0;
  padding: 0;
  margin: 0;
  display: table;
  }

.slidepush li {
  --w: 50px;
  width: var(--w);
  height: 50px;
  background-color: red;
  vertical-align: top;

  
  border: 0;
  padding: 0;
  margin: 0;
  display: inline-block;
}
      
.enter {
  animation: enter 1s;
}
      
@keyframes enter {
  0% {
    transform: translateX(-100%);
    margin-left: calc(var(--w) * -1);
  }
  100% {
    transform: translateX(0px);
    margin-left: 0
  }
}

JavaScript

class SlidePush {

	constructor(ulElement) {
  	this.element = ulElement;
  }
  
  add(item) {
  	this.element.prepend(item.addClass('enter'));
  }
}

const sp = new SlidePush($(".slidepush"));

setInterval(() => {//
var colors = ['red', 'blue', 'green', 'black'];
var color = colors[Math.floor(Math.random() * colors.length)];
sp.add($("<li style='background-color:" + color +" !important;'></li>"));
}, 1000);