JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/ui-lightness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="container" style="position: absolute; background: lightblue; width: 400px; height: 400px;">
    <div style="position: absolute; left: 0; top: 0; width: 75px; height: 25px; background: lightcoral;"></div>
    <div style="position: absolute; left: 75px; top: 25px; width: 75px; height: 25px; background: lightcoral;"></div>
    <div style="position: absolute; left: 150px; top: 50px; width: 75px; height: 25px; background: lightcoral;"></div>
</div>

JavaScript

$(function() {
    $("#container").selectable({
        selected: function (event, ui) {
          console.log("selected");
        },
        unselected: function (event, ui) {
            console.log("unselected");
        },
        start: function (event, ui) {
            console.log("start");
        },
        stop: function (event, ui) {
            console.log("stop");
        }
    });
});