JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="x">
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
</ul>

CSS

#x {
    position: relative;
}
#x li {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid red;
    position: absolute;   
    background: #eee;
    padding: 5px;
}

JavaScript

var list = document.getElementById('x');
var elements = list.getElementsByTagName('li');
for (var i=0; i<elements.length; i++) {
    elements[i].style.left = Math.ceil(Math.random()*300) + 'px';
    elements[i].style.top = Math.ceil(Math.random()*300)+ 'px';
    
    var rot = 'rotate(' + (Math.ceil(Math.random()*180) - 90) + 'deg)';
    elements[i].innerHTML = i + " : " + rot;
    elements[i].style.roration = Math.ceil(Math.random()*180) - 90;
    elements[i].style.MozTransform = rot;
    elements[i].style.WebkitTransform = rot;
    elements[i].style.OTransform = rot; 
    
    elements[i].style.zIndex = Math.ceil(Math.random() * 20) + 1000;
}