JSFiddle - React, Tailwind, and code Playground

by matmuchrapna

HTML

<script src="http://gridster.net/dist/jquery.gridster.js"></script>
<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
        	<img src="http://placekitten.com/g/200" alt="">
        </li>
        <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
        	<img src="http://placekitten.com/g/200" alt="">
        </li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
        	<img src="http://placekitten.com/g/200" alt="">
        </li>
        <li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
        	<img src="http://placekitten.com/g/200" alt="">
        </li>
    </ul>
</div>

CSS

ul {
    width:  400px;
    height: 400px;
}

ul  { background: yellow; }
li  { background: red;}
img { background: green;}

li, img {
    width: 50%;
    float: left;
}

JavaScript

$(function() {
 
    $('.gridster').gridster({
        /*widget_margins: [0, 0],*/
        /*widget_selector: "> li",*/
        widget_base_dimensions: [400, 400]
    });
 
});