JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent"></div>

CSS

#parent {
  width: 500px;
  height: 500px;
  position: relative;
}

#parent > div {
  background: red;
  border: 2px solid black;
}

JavaScript

function draw() {
var blocks = [
        {text: 'block1'}, 
        {text: 'block2'}, 
        {text: 'block3'},
        {text: 'block4'},
        {text: 'block5'},
        {text: 'block6'},
        {text: 'block7'},
        {text: 'block8'},
        {text: 'block9'},
    ],
     maxX = 400,
     maxY = 400;     

blocks.forEach(function (blockInfo) {
  var block = document.createElement('DIV'),
       randAngleText = 'rotate(' + Math.round(Math.random() * 80 - 40) + 'deg)';

  block.innerText = blockInfo.text;
  block.textContent = blockInfo.text; // FF
    
  block.style.position = 'absolute';
  block.style.left = Math.round(Math.random() * maxX) + 'px';
  block.style.top = Math.round(Math.random() * maxY) + 'px';
    
  block.style['transform'] = randAngleText;
  block.style['-o-transform'] = randAngleText;
  block.style.webkitTransform = randAngleText;
  block.style.MozTransform = randAngleText;

  document.getElementById('parent').appendChild(block);
})
}
    
$(document).ready(draw);