JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<div data-tall="12" class="shadow_box">&nbsp;</div>
<div data-tall="30" class="shadow_box">&nbsp;</div>
<div data-tall="1" class="shadow_box">&nbsp;</div>
<div data-tall="140" class="shadow_box">&nbsp;</div>
<div data-tall="30" class="shadow_box">&nbsp;</div>
<div data-tall="50" class="shadow_box">&nbsp;</div>
<div data-tall="20" class="shadow_box" id="large_block">&nbsp;</div>

<div id="draggable" class="ui-widget-content" title="Drag me!">
    LIGHT SOURCE
</div>

CSS

.shadow_box{
   box-shadow:0px 0px 30px 10px #ccc;  
   width:80px;
   height:40px;
   margin:50px;
   float:left;
   font-size:10px;
   text-align:center;
   background:white;
   border-left:1px solid #aa0000;
   border-bottom:1px solid #aa0000;
   border-radius:5px;
}
body{
    background:url(http://blogs.independent.co.uk/wp-content/uploads/2012/05/Background_brick_wall.jpg);
}
#draggable { 
    background:#ffface; 
    position:absolute;
    box-shadow:0px 0px 10px 5px #ffface; 
    top:150px;
    left:150px;
    font-size:10px; 
    font-family:Arial;
    border-radius:30px; 
    padding:30px 10px;
    cursor:pointer;
    color:orange;
    border:1px solid orange;
}
#large_block{
    height:150px;
    width:80px;
}

JavaScript

$(function(){
    
    //defines
    var shadowColor = 'rgba(0,0,0,0.7)';
    var distChange = 1/8; //larger value -> shadow changes more due to distance to source
    
    $( "#draggable" ).draggable();
    
    //each time the source is moved we recalculate the shadows
    //  considering the curent source position
    $( "#draggable" ).bind( "drag", function(event, ui) {
        var top=ui.position.top + $('#draggable').height()/2;
        var left=ui.position.left + $('#draggable').width()/2;
        recalc_shadows(top,left)
    });
    
    function recalc_shadows(x,y){
        $('.shadow_box').each(function(){
            
           //get top,left position and tallness for the current block
           var top = $(this).position().top + $(this).height()/2;
           var left =$(this).position().left + $(this).width()/2;
           var tall = $(this).attr('data-tall');
           
           //calculate how far the shadow will be based on distance to source and tallness
           var nx = (top-x)/(180/Math.sqrt(tall)) ;
           var ny = (left-y)/(180/Math.sqrt(tall)) ;
           
           //calculate how much the size of the shadow will be affected by the distance to source
           var dist_modifier = (Math.sqrt(Math.abs(nx)+Math.abs(ny))*distChange)
           var new_blur = 5 + dist_modifier * Math.floor((tall)/4);
           
           //get block color based on tallness
           var r = Math.min(255,parseInt(tall)*2+190);
           $(this).css('background','rgb('+r+','+150+','+150+')');
           $(this).css('box-shadow',ny+'px '+nx+'px '+new_blur+'px ' + dist_modifier*tall/5 +'px '+shadowColor);
            
           $(this).text("Tallness: "+$(this).attr('data-tall')); 
            
           //change border size according to tallness
           var r = Math.min(255,parseInt(tall)*2+50);
           r=Math.max(100,255-r);
           $(this).css('border-top',Math.max(tall/15,1) +'px solid rgb('+r+','+50+','+50+')');
          ...