JSFiddle - React, Tailwind, and code Playground

by iahmadraza

HTML

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

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())),
    top : ((Math.random() * $('.main').height()))
  });
});