JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<div class="foo"></div>

CSS

.foo{
   width:50px;
    height:50px;
    background-color: #BBB;
    margin:100px;
}

JavaScript

function variation () {
            
            w = 30;
            
            $(".foo").draggable( "option", "grid", [w+13, 30] );
        }
    
    var optdrag = {
            grid: [20, 30],
            axis: "yx",
            opacity: 0.35
           
            }
        var optres = {
            grid: 30,
            handles: 's',
            ghost: true
           
        }
        
    $(window).resize(function(){
            variation()
        })
    
    $(".foo").resizable(optres).draggable(optdrag)




variation()