JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
    
<p>Resize me to the west.</p>
    
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>
        <div class="box"></div>
    </li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul {
    overflow: hidden;
    list-style: none;
}
li {
	float: left;
	width: 30px;
	height: 20px;
}
.box {
	width: 30px;
	height: 20px;
	background: #3db9d3;
}

JavaScript

$( ".box" )
    .resizable({
        handles: "e, w",
        grid: [ 30, 0 ]
    });