JSFiddle - React, Tailwind, and code Playground

by Kees C. Bakker

HTML

zadd set:1 -1555596360001 alpha
zadd set:1 -1555596360002 beta
zadd set:1 -1555596360003 gamma
zadd set:1 -1555596360004 alpha
zadd set:1 -1555596360005 delta
zadd set:1 -1555596360006 epsilon
zadd set:1 -1555596360007 alpha
zadd set:1 -1555596360008 zeta
zadd set:1 -1555596360009 eta
zadd set:1 -1555596360010 theta
zadd set:1 -1555596360011 iota
zadd set:1 -1555596360012 kappa
zadd set:1 -1555596360013 alpha
zadd set:1 -1555596360014 lambda
zadd set:1 -1555596360015 mu
zadd set:1 -1555596360016 alpha

CSS

html, body {
  background-color:transparent;
  color:transparent;
  color:white;
  font-family:Consolas;
  font-weight:bold;
  font-size:0px;
  padding:10px;
}

div {
  color:white;
  font-size:16px;
  width:380px;
  padding-bottom:3px;
  padding-top:2px;
  border-bottom:dashed 1px darkgray;
  display:none;
}

.alpha {
  color:red;
}

span {
  display:inline-block;
  color:gray;
  font-weight:normal;
  text-align:right;
  float:right;
  
}

div:nth-child(-n+10){
    display:block;
}

JavaScript

var txt = $(document.body).text().split('\n');
$(document.body).text('');

var t = 2;
for(var i = 0; i < txt.length; i++){
	var s =  txt[i].split(' ');
	if(s.length <= 3) continue;
	let name = s[3];
  let html = "<div class=" + name + ">" + name + "<span>" + s[2] + "</span></div>";
  
  t++;
  
  setTimeout(function(){
  	$(document.body).find('.' + name).remove();
	  $(document.body).prepend($(html));
  }, 1000 * t);
}