JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<ul id="list">     
  </ul>

CSS

#list{
  position:relative;
  margin:0;
  padding:0;  
  height: 500px; 
  width: 200px; 
  background:gray;
  overflow:hidden;
}
#list li{
  position:absolute;
  list-style:none;
  background:rgba(0,0,0,0.2);
  width:100%;
  text-align:center;
  padding:5px;
  margin-bottom:10px;
  
}

JavaScript

var words = ["баскетболист","авиамеханик","саквояж","аквапарк","бабуин","свинья","мансарда","карман","белка","теплоход","завиток","токарь","крыло","залежь","сабля","Ирландия","процессор","питомец","Корея","граница","галета","колобок","аттракцион","порошок","клиника","зародыш","тыква","авокадо","накипь","скальпель","скалка","Крым","зубец","бестселлер","бокс","свекла","орден","плотина","вокзал","кетчуп","жандармерия","марка","кокс","бутон","антиквариат","каравай","подошва","ленточка","фура","речка","труба","кузня","розетка","жид","китель","монолит","люк","мышка","косичка","сера","мужчина","перстень","конус","клюв","Исландия","кисть","хомяк","гальюн","масленка","кодекс","гондола","караулка","камера","бублик","кулек","ежевика","карьер","взрывчатка","пудинг","антресоль","пергамент","картофелина","колосок","веретено","утес","воз","клан","планшет","пирамида","корона","гиппопотам","мегафон","лягушка","равнина","алхимик","плетка","автоцистерна","вуз","круг","картина"];

var list = document.querySelector("#list");
var speed = 1;
words.sort().forEach(function(el,i){
	var li = document.createElement("li");
  li.innerHTML = el;
  list.appendChild(li);
  li.style.top = (i * (li.offsetHeight+10) ) +"px";
});
(function(){
	Array.from(list.children).forEach(c=>{
  	c.style.top = (c.offsetTop - speed ) +"px";
  	  })  	  
  	  while(list.children[0].offsetTop <= -list.children[0].offsetHeight){
  	var el = list.children[0];
  	    el.style.top = list.children[list.children.length-1].offsetTop + el.offsetHeight + 10 + 'px';
  	      list.removeChild(el);
  	        list.appendChild(el);
  	  }
	setTimeout(arguments.callee,10);
})()