JSFiddle - React, Tailwind, and code Playground

HTML

<div id='block-container'>
  <div class='block'></div>
  <div class='block'></div>
  <div class='block'></div>
  <div class='block'></div>
  <div class='block'></div>
  <div class='block'></div>  
  <div class='block'></div>
  <div class='block'></div>
  <div class='block'></div>    
</div>

CSS

#block-container {
  position: absolute;
  width: 100%;
  height: 1000px;
}
.block {
  width: 100px;
  height: 100px;
  min-width: 50px;
  min-height: 50px;
  background: blue;
  position: absolute;
}

JavaScript

function randomFromTo(from, to){
			return Math.floor(Math.random() * (to - from + 1) + from);
		}
  
		function moveRandom() {
			var cPos = $('#block-container').offset();
			var cHeight = $('#block-container').height();
			var cWidth = $('#block-container').width();
			
			var pad = parseInt($('#block-container').css('padding-top').replace('px', ''));
			
			var bHeight = $('.block').height();
			var bWidth = $('.block').width();
			
			maxY = cPos.top + cHeight - bHeight - pad;
			maxX = cPos.left + cWidth - bWidth - pad;
			
			minY = cPos.top + pad;
			minX = cPos.left + pad;
			
			
			
      $('.block').each(function() {
        
			  newY = randomFromTo(minY, maxY);
			  newX = randomFromTo(minX, maxX);
        
        $(this).animate({
				  top: newY,
				  left: newX
				  }, 500, function() {
			  });
      });
		}

moveRandom();