JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="container"></div>

CSS

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
#container {
  display: flex;
  flex-wrap: wrap;
}
.box {
  width: 50%;
  height: 100vh;
  border: 1px solid black;
}

JavaScript

function test(){
	var container = document.querySelector('#container');
  var elems = 10;
  function a(){
		container.innerHTML = '';
		for(var i = 1; i < elems + 1; i++){
      var elem = document.createElement('div');
      elem.classList.add('box');
      elem.style.width = Math.random() * 10 + elems % i * (Math.random() * 1) + '%';
      container.append(elem)
    }
  	requestAnimationFrame(a)
  }
  a();
}
test()