JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pink">
			<div class="chicken1"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
			<div class="chicken2"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
			<div class="chicken3"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
			<div class="chicken4"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
			<div class="chicken5"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
			<div class="chicken6"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
		</div>

CSS

.pink {
	position: absolute;
	height: 280px;
	width: 280px;
	left: 50%;
	margin-left: -140px;
	top: 50%;
	margin-top: -140px;
}
.chicken1 i, .chicken2 i, .chicken3 i, .chicken4 i, .chicken5 i, .chicken6 i {
	position: absolute;
	border-radius: 50%;
	list-style: none;
	display: block;
}

JavaScript

function myFunction(x) {
		    (function() {
		        $(x).each(function() {
		            var size = Math.floor(Math.random() * 40) + 1;
		            var percent = Math.floor(Math.random() * 99) + 1;
		            var colors = ["rgba(0,0,0,.3)", "rgba(0,0,0,.5)", "rgba(0,0,0,.7)", "rgba(0,0,0,.9)"];
		            var randcolors = colors[Math.floor(Math.random() * colors.length)];
		            $(this).removeClass().css({
		                "width": size,
		                "height": size,
		                "top": "50%",
		                "opacity": "0",
		                "left": "50%",
		                "background-color": randcolors
		            });
		            var left = Math.floor(Math.random() * ((-1700) - (-600) + 1) + (-600));
		            var right = Math.floor(Math.random() * ((1700) - (600) + 1) + (600));
		            
		            var xaxischoices = [left, right];
		            var xaxis = xaxischoices[Math.floor(Math.random() * xaxischoices.length)];
		            
		            var yaxis = Math.floor(Math.random() * ((-1700) - (1700)) + (1700));

		            var timerand = Math.floor(Math.random() * (12800 - 6800 + 1) + 6800);
		            $(this).animate({
		                "left": xaxis + "%",
		                "opacity": "1",
		                "top": yaxis + "%"
		            }, timerand, function() {
		                // Animation complete.
		            });
		        });
		        setTimeout(arguments.callee, 12900);
		    })();
		}
			setTimeout(function() {
			    myFunction(".chicken1 i");
			}, 2000);
			setTimeout(function() {
			    myFunction(".chicken2 i");
			}, 4000);
			setTimeout(function() {
			    myFunction(".chicken3 i");
			}, 6000);
			setTimeout(function() {
			    myFunction(".chicken4 i");
			}, 8000);
			setTimeout(function() {
			    myFunction(".chicken5 i");
			}, 10000);
			setTimeout(function() {
			    myFunction(".chicken6 i");
			}, 12000);