JSFiddle - React, Tailwind, and code Playground

by Sumesh TG

HTML

<HTML>
	<HEAD>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
		<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.arctic.css" type="text/css" />
		<script type="text/javascript" src="https://www.jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
		<script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
		<script type="text/javascript" src="app.js"></script>
		<link rel="stylesheet" href="app.css" type="text/css" />

	</HEAD>
	<BODY>
       <div id="sortable">
            <div>0</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
	</BODY>
</HTML>

CSS

#sortable {
            list-style-type: none;
            margin: 2px;
            padding: 5px;
            float: left;
            width: 312px;
            border: lightblue solid 2px;
        }

        #sortable div {
                margin: 1px;
                background-color: lightblue;
                border: DodgerBlue solid 1px;
                padding: 0;
                float: left;
                padding-left: 0;
                text-align: center;
                font-size: 5.8em;
                width: 100px;
                height: 100px;
            }

JavaScript

$(document).ready(function () {
   $("#sortable").jqxSortable();
   $("#sortable").jqxSortable("grid", [ 50, 50 ]);
});