JSFiddle - React, Tailwind, and code Playground

by Bakasov

HTML

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

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

CSS

.main {
  width: 600px;
  height: 400px;
  background:white;
  align-items: center;
  justify-content: center;
}
.user {
  position : absolute;
  width :400px;
  height: 200px;
  background:#f0f0f0;
  left:10%;
  top:25%;
}

.box {
  width: 30px;
  height: 30px;
  background:linear-gradient(blue, pink);
  border-radius: 50px;
  position: absolute
}

JavaScript

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