JSFiddle - React, Tailwind, and code Playground

HTML

<div id='circles-holder'>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
    <div class='circle'></div>
</div>

CSS

body {
    margin:0;
    padding:0;
    background:transparent;
}
#circles-holder {
    width:500px;
    height:300px;
    margin:auto;
    position:relative;
    background:transparent;
    border: 1px solid black;
}

.circle {
    background:#EED;
    border:1px solid blue;
    position:absolute;
}

JavaScript

(function( $ ){
    $.fn.circlePacker = function(circles,options) {  
        
        // Create some defaults, extending them with any options that were provided
        var settings = $.extend( {
            'damping' : 0.1,
            'dampingAccel' : 0.98,
            'dampingCutoff' : 0.007,
        }, options);
        
        
        return this.each(function() { 
            
            //reference to (this) holder of circles
            var container = $(this);
            
            //center of container
            var centerX = container.width()/2;
            var centerY = container.height()/2;
            
            //array for holding circles
            var circAR = new Array();
            
            
            //jquery loop for positioning initially and setting data for top and left
            var i = 0;
            circles.each(function() {
                if(i%2 == 0)
                {
                    var l = Math.floor(Math.random() * container.width()+container.width());	
                } else
                {
                    var l = Math.floor(Math.random() * container.width()/2);
                }
                var t = Math.floor(Math.random() * container.height());
                $(this).css({
                    'left':l,
                    'top':t
                })
                $(this).data('xPos',l);
                $(this).data('yPos',t);
                var r = $(this).width()/2+3;
                $(this).data('radius',r);
                circAR.push($(this));
                i++;
            })
            
            //reassign array for circles
            circles = circAR;
            
            //sort array by distance from center
            circles = circles.sort(sortFromCenter);
            
            //iterated on 
            var packCircles = function() {
                
                //iterated circle local insance
                var ci;
                var cj;
               ...