JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<script>
function func(){
var num=document.getElementById('number').value;
document.getElementById('number').value=num;
for (var r=0;r<num;r++){
if (document.getElementById('width').value>600||document.getElementById('width').value<0||document.getElementById('mw').value<document.getElementById('width').value||document.getElementById('mw').value>1000||document.getElementById('opacity').value<0||document.getElementById('opacity').value>1||document.getElementById('number').value<1||document.getElementById('number').value>2000||document.getElementById('length').value>600||document.getElementById('length').value<0||document.getElementById('ml').value<document.getElementById('length').value||document.getElementById('ml').value>1000||document.getElementById('rad').value<0){
alert('Please choose valid numbers \n The minimum width and height must be between 0 and 600 \n The maximum width and height must be between 1 and 2000 and be larger than the minimum \n The opacity must be between 0 and 1 \n The number of squares has to be between 1 and 2000 ');
window.location.reload();
}
var div = document.createElement("div");
var minwidth=document.getElementById('width').value;
var widthRange=document.getElementById('mw').value-document.getElementById('width').value;
var widthrand=Math.floor(Math.random()*widthRange);
var width=widthrand + document.getElementById('width').value/1;
var minlength=document.getElementById('length').value;
var lengthRange=document.getElementById('ml').value-document.getElementById('length').value;
var lengthrand=Math.floor(Math.random()*lengthRange);
var length=lengthrand + document.getElementById('length').value/1;
var minrad=document.getElementById('rad').value;
var maxrad=document.getElementById('maxrad').value;
var radrange=maxrad-minrad;
var...