JSFiddle - React, Tailwind, and code Playground

by xnuxi

HTML

<html>
    <head>
        <script>
        document.addEventListener("DOMContentLoaded", function() {

var shapes = [];
var random = function() {
  var shape = document.createElement('div');
  shape.style.position = 'absolute';
  shape.style.left = Math.random() * window.innerWidth + 'px';
  shape.style.top = Math.random() * window.innerHeight + 'px';
  shape.style.width = Math.random() * 100 + 'px';
  shape.style.height = Math.random() * 100 + 'px';
  shape.style.opacity = Math.random();
  shape.style.backgroundColor = '#' + Math.random().toString(16).substr(-6);
  document.body.appendChild(shape);
  shapes.push(shape);
};
setInterval(random, 1000);

var borderRadius = function() {
  for (var i = 0; i < shapes.length; i++) {
    shapes[i].style.borderRadius = Math.random() * 100 + 'px';
  }
};
setInterval(borderRadius, 1000);

var relocate = function(shape) {
  shape.style.left = Math.random() * window.innerWidth + 'px';
  shape.style.top = Math.random() * window.innerHeight + 'px';
};
var relocateOnHover = function(shape) {
  shape.onmouseover = function() {
    relocate(shape);
  };
};
for (var i = 0; i < shapes.length; i++) {
  relocateOnHover(shapes[i]);
}
});
        </script>
    </head>
</html>