JSFiddle - React, Tailwind, and code Playground

HTML

<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>

<div class="drop"></div>
<div class="info"></div>

<div class="drop"></div>
<div class="info"></div>

CSS

.drag { display:inline-block; border:1px solid silver; width:20px; height:20px; margin:10px; }
.drop { height:100px; width:200px; border:1px solid silver; background-color:whitesmoke; margin:10px; }

JavaScript

$('.drag').draggable({
    revert: 'invalid',
    stop: function(){
        // Make it properly draggable again
        $(this).draggable('option','revert','invalid');
    }
});

$('.drop').droppable({
    drop: function(event,ui){
        var $this = $(this);
        
        // Check number of elements already in
        if($this.find('.drag').length >= 4){
            // Cancel drag operation (make it always revert)
            ui.draggable.draggable('option','revert',true);
            return;
        }

        // Put dragged item into container
        ui.draggable.appendTo($this).css({
            top: '0px',
            left: '0px'
        });
        
        $('.drop').each(function(){
            var $this = $(this);
            $this.next('.info').html($this.find('.drag').length);
        });
    }
});