JSFiddle - React, Tailwind, and code Playground
CSS
div {
position: absolute;
background-color: lightblue;
opacity: .5;
width: 100px;
height: 100px;
box-shadow: 3px 3px 5px gray;
}
JavaScript
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
$(function () {
var maxLeft = parseInt($(window).width() - 100, 10);
var maxTop = parseInt($(window).height() - 100, 7);
var html = '';
for (var i = 0; i < 7; i++) {
html += '<div id="div" style="top:' + getRandomInt(0, maxTop) + 'px;left:' + getRandomInt(0, maxLeft) + 'px" class="div"></div>';
}
$('body').append(html);
$('div').mouseover(function () {
$(this).css({'background-color':'red'});
}, function() {
$(this).css({'background-color':'lightblue'});
});
});