JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main"></div>

CSS

.main {
  width: 600px;
  height: 400px;
  background: #f0f0f0;
  position: relative;
}

.box {
  width: 100px;
  height: 100px;
  background: #e00;
  border-radius: 50px;
  position: absolute;
  /* parent width - box width */
}

JavaScript

for (var i = 0; i < 5; i++) {
  $('.main').append('<div class="box"></div>');
}
$( '.box' ).each(function( index ) {
  $(this).css({
    left : Math.random() * ($('.main').width() - $(this).width()),
    top : Math.random() * ($('.main').height() - $(this).height())
  });
});