JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
</div>
CSS
.bug {
width: 100px;
height: 100px;
background: #ff0000;
position: absolute
}
html, body, #container {
width: 100%;
height: 100%;
}
JavaScript
$(document).ready(function() {
var $bug = "<div class='bug'><div>";
var x = 0;
var timer = setInterval(function() {
if (x > 3) {
clearInterval(timer);
}
r1 = Math.floor((Math.random() * 270) + 1);
r2 = Math.floor((Math.random() * 270) + 1);
$('#container').append("<div class='bug + bug" + x + "'style='top:" + r1 + "px;left:" + r2 + "px;'></div>")
setTimeout(function(index) {
$('.bug.bug' + index).remove();
}, 3000, x)
x++;
}, 1000);
});