JSFiddle - React, Tailwind, and code Playground

by Lauren

HTML

<div id="box1" class="boxes">
<div id="text1">&nbsp;&nbsp;Lorem Ipsum Dolor Sit Amet&nbsp;&nbsp;</div>
</div>

<div id="box2" class="boxes">
<div id="text2">&nbsp;&nbsp;Lorem Ipsum Dolor Sit Amet&nbsp;&nbsp;</div>
</div>

<div id="box3" class="boxes">
<div id="text3">&nbsp;&nbsp;Lorem Ipsum Dolor Sit Amet&nbsp;&nbsp;</div>
</div>

<div id="box4" class="boxes">
<div id="text4">&nbsp;&nbsp;Lorem Ipsum Dolor Sit Amet&nbsp;&nbsp;</div>
</div>

CSS

.boxes {
	position: absolute;
}

#text1 {
    color: white;
	font-family: "Times", Times New Roman, serif;
	font-size: 16px;
	font-weight: bold;
    line-height: 24px;
    background-color: black;
}

#text2 {
	color: white;
	font-family: "Times", Times New Roman, serif;
	font-size: 16px;
	font-weight: bold;
	line-height: 24px;
    background-color: blue;
}

#text3 {
	color: white;
	font-family: "Times", Times New Roman, serif;
	font-size: 16px;
	font-weight: bold;
	line-height: 24px;
    background-color: green;
}

#text4 {
	color: white;
	font-family: "Times", Times New Roman, serif;
	font-size: 16px;
	font-weight: bold;
	line-height: 24px;
    background-color: red;
}

JavaScript

function setRandomPos(elements,x,dx){
	elements.each(function(){
		fixLeft=(Math.floor(Math.random()*x)*10) + dx;
		fixTop = (Math.floor(Math.random()*40)*10) + 180;
		$(this).offset({
			left: fixLeft,
			top: fixTop
			});
		});
}

setRandomPos($(".boxes"),40,40);