JSFiddle - React, Tailwind, and code Playground

by sstur

HTML

<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
  <li>Item Four</li>
</ul>

CSS

body {
  background: white;
  border: 1px solid white;
}
ul {
  margin: 20px;
  border: 10px solid white;
  padding: 0;
  outline: 1px solid black;
  transform: scaleY(-1);
  height: 50px;
  overflow: scroll;
}
li {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 20px;
  transform: scaleY(-1);
}

JavaScript

let ul = document.querySelector('ul');
function addItem(text) {
  let li = document.createElement('li');
  li.appendChild(document.createTextNode(text));
  ul.insertBefore(li, ul.firstChild);
}

// setInterval(() => addItem(Math.random().toString()), 1500);