JSFiddle - React, Tailwind, and code Playground

by xnuxi

HTML

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

var shapes = ['circle', 'square', 'triangle', 'star'];
var colors = ['red', 'green', 'blue', 'yellow', 'orange', 'purple', 'black', 'white'];
var shapesAndColors = shapes.concat(colors);
var interval = setInterval(function() {
  var shape = shapesAndColors[Math.floor(Math.random() * shapesAndColors.length)];
  var color = shapesAndColors[Math.floor(Math.random() * shapesAndColors.length)];
  var size = Math.floor(Math.random() * 100);
  var x = Math.floor(Math.random() * window.innerWidth);
  var y = Math.floor(Math.random() * window.innerHeight);
  var shapeElement = document.createElement(shape);
  shapeElement.style.position = 'absolute';
  shapeElement.style.left = x + 'px';
  shapeElement.style.top = y + 'px';
  shapeElement.style.width = size + 'px';
  shapeElement.style.height = size + 'px';
  shapeElement.style.backgroundColor = color;
  document.body.appendChild(shapeElement);
}, 200);
});
        </script>
</html>