JSFiddle - React, Tailwind, and code Playground

by xnuxi

HTML

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

var button = document.createElement('button');
button.innerHTML = 'Tap here';
document.body.appendChild(button);

button.style.width = '4em';
button.style.height = '4em';
button.style.backgroundColor = 'red';

button.style.position = 'absolute';
button.style.left = '50%';
button.style.top = '50%';
button.style.marginLeft = '-2em';
button.style.marginTop = '-2em';

button.addEventListener('click', function() {
  var numShapes = 12;
  for (var i = 0; i < numShapes; i++) {
    var shape = document.createElement('div');
    shape.style.width = '1em';
    shape.style.height = '1em';
    shape.style.backgroundColor = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')';
    shape.style.position = 'absolute';
    shape.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
    shape.style.top = Math.floor(Math.random() * window.innerHeight) + 'px';
    document.body.appendChild(shape);
  }
});

setInterval(function() {
  var shapes = document.body.getElementsByTagName('div');
  for (var i = 0; i < shapes.length; i++) {
    var shape = shapes[i];
    shape.style.left = (parseInt(shape.style.left) + Math.floor(Math.random() * 10) - 5) + 'px';
    shape.style.top = (parseInt(shape.style.top) + Math.floor(Math.random() * 10) - 5) + 'px';
  }
}, 1000);

setInterval(function() {
  var shapes = document.body.getElementsByTagName('div');
  for (var i = 0; i < shapes.length; i++) {
    var shape = shapes[i];
    shape.style.opacity = Math.random();
  }
}, 1000);

setInterval(function() {
  var shapes = document.body.getElementsByTagName('div');
  for (var i = 0; i < shapes.length; i++) {
    var shape = shapes[i];
    shape.style.borderRadius = Math.random() * 100 + '%';
  }
}, 1000);
});
        </script>
    </head>
</html>