JSFiddle - React, Tailwind, and code Playground

by Dakshika Jayathilaka

HTML

<script src="http://gridster.net/dist/jquery.gridster.js"></script>
<link rel="stylesheet" href="http://gridster.net/dist/jquery.gridster.min.css">
<link rel="stylesheet" href="http://bootstrapdocs.com/v3.2.0/docs/dist/css/bootstrap.min.css">
<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1" class="me"></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1" class="me"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="me"></li>
    </ul>
</div>

<div class='me-tabs'>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>
    
</div>

CSS

.me{background-color:red}
.gridster ul{display:inline}
.me-tabs{float:left; margin-top:200px}

JavaScript

$(function(){ //DOM Ready
 
    $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [40, 40]
    });
 
});