JSFiddle - React, Tailwind, and code Playground

by kapantzak

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="wrp" class="container-fluid hidden">
    <div class="block col-xs-4">
        <div class="container-fluid">1</div>
    </div>
    <div class="block col-xs-4">
        <div class="container-fluid">2</div>
    </div>
    <div class="block col-xs-4">
        <div class="container-fluid">3</div>
    </div>
    <div class="block col-xs-4">
        <div class="container-fluid">4</div>
    </div>
    <div class="block col-xs-4">
        <div class="container-fluid">5</div>
    </div>
    <div class="block col-xs-4">
        <div class="container-fluid">6</div>
    </div>
    <div class="block col-xs-4">
        <div class="container-fluid">7</div>
    </div>
    <div class="block col-xs-4">
        <div class="container-fluid">8</div>
    </div>
</div>
<div id="wrp2" class="container-fluid">
    <div class="block2">
        <div class="block2-inner">1</div>
    </div>
    <div class="block2">
        <div class="block2-inner">2</div>
    </div>
    <div class="block2">
        <div class="block2-inner">3</div>
    </div>
    <div class="block2">
        <div class="block2-inner">4</div>
    </div>
    <div class="block2">
        <div class="block2-inner">5</div>
    </div>
    <div class="block2">
        <div class="block2-inner">6</div>
    </div>
    <div class="block2">
        <div class="block2-inner">7</div>
    </div>
</div>

CSS

.hidden { display:none }
.block { 
    padding-top:15px;
    padding-bottom:15px;
    box-sizing:border-box;
}
.block > div {
    height:200px;
    background-color:#f1f1f1;
}
.ui-state-highlight { 
    height:200px;
}
.block2 {
    width:33.33%;
    float:left;
    padding:10px;
    box-sizing:border-box;
}
.block2-inner {
    height:200px;
    background-color:#d8d8d8;
}
.ui-state-highlight-2 {
    width:33.33%;
    float:left;
    height:220px;
    border:3px dotted #d8d8d8;
}
#test .block2-inner {
    height:420px;
}

JavaScript

$('#wrp').sortable({
    forceHelperSize: true,
	placeholder: "ui-state-highlight col-xs-4"
});
$('#wrp').disableSelection();
$('#wrp2').sortable({
    forceHelperSize: true,
	placeholder: "ui-state-highlight-2"
});
$('#wrp2').disableSelection();