JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en" style="zoom: 100%; ">
<head>
  <meta charset="utf-8">
  <title>HTML5 Demo: File API</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

</head>
<body>
<div class="demo">

<div id="sortable">
  <div class="ui-state-default">1</div>
  <div class="ui-state-default">2</div>
  <div class="ui-state-default">3</div>
  <div class="ui-state-default">4</div>
  <div class="ui-state-default">5</div>
  <div class="ui-state-default">6</div>
  <div class="ui-state-default">7</div>
  <div class="ui-state-default">8</div>
  <div class="ui-state-default">9</div>
  <div class="ui-state-default">10</div>
  <div class="ui-state-default">11</div>
  <div class="ui-state-default">12</div>
</div>

</div><!-- End demo -->

</body></html>

CSS

#sortable {
  width: 400px;
  height: 400px;
}
.ui-state-default {
  border: 1px solid black;
  margin: -55px -55px;
  float: left;
  width: 200px;
  height: 200px;
  font-size: 4em;
  text-align: center;
   transform: scale(.4);
   -webkit-transform: scale(.4); /* Safari and Chrome */
   -o-transform: scale(.4); /* Opera */
   -moz-transform: scale(.4); /* Firefox */
}
#one {
  top: 0px;
  left: 0px;
}

JavaScript

$(function() {
    $( ".ui-state-default" ).draggable();
  });