JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="container" class="container">
<div></div>
</div>

<span class="main">
Hello World!
</span>

CSS

body {margin:0;background-color:#000000;}
.container {width:100%;height:50vh;overflow:hidden;margin:auto;
-webkit-box-reflect: below 0 linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
}

.main {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  color:#ffffff;font-size:26px;font-family:Arial;
}

JavaScript

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
  color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function getRandomGradient() {
    return 'linear-gradient('+(Math.random()*360)+'deg, '+getRandomColor()+' 0%, '+getRandomColor()+' 100%)';
}

var container = document.getElementById('container');

function myFunction() {
  timeout = setTimeout(alertFunc, 1);
}

function alertFunc() {
const div = document.createElement("div");
div.style.height = "2px";
div.style.background = getRandomGradient();

  container.appendChild(div);
if (container.children.length > 500) {
container.removeChild(container.children[0]);
}
myFunction();
}




myFunction();