JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<script src="http://tympanus.net/Tutorials/DraggableImageBoxesGrid/js/jquery.tmpl.min.js"></script>
<script src="http://tympanus.net/Tutorials/DraggableImageBoxesGrid/js/jquery.kinetic.js"></script>
<script src="http://tympanus.net/Tutorials/DraggableImageBoxesGrid/js/jquery.easing.1.3.js"></script>
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
        <script id="previewTmpl" type="text/x-jquery-tmpl">
            <div id="ib-img-preview" class="ib-preview">
                <img src="${src}" alt="" class="ib-preview-img"/>
                <span class="ib-preview-descr" style="display:none;">${description}</span>
                <div class="ib-nav" style="display:none;">
                    <span class="ib-nav-prev">Previous</span>
                    <span class="ib-nav-next">Next</span>
                </div>
                <span class="ib-close" style="display:none;">Close Preview</span>
                <div class="ib-loading-large" style="display:none;">Loading...</div>
            </div>        
        </script>
        <script id="contentTmpl" type="text/x-jquery-tmpl">    
            <div id="ib-content-preview" class="ib-content-preview">
                <div class="ib-teaser" style="display:none;">{{html teaser}}</div>
                <div class="ib-content-full" style="display:none;">{{html content}}</div>
                <span class="ib-close" style="display:none;">Close Preview</span>
            </div>
        </script>    

<div class="container">
            <div id="header" class="header">
                <a href="http://tympanus.net/Tutorials/ScrollbarVisibility/"><span>&laquo; Previous Demo: </span>Scrollbar Visibility</a>
                <span class="right_ab">
                    <a href="http://www.flickr.com/people/notsogoodphotography/" target="_blank">Images by <strong>Ibrahim Iujaz</strong></a>
                    <a href="http://creativecommons.org/licenses/by/2.0/deed.en_GB"...

CSS

@import url('reset.css');
body{
    background: #ddd;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    overflow: hidden;
}
a{
    color: #ddd;
    text-decoration: none;
}
.clr{
    clear: both;
}
/* Header Style */
.header{
    font-family: 'Arial Narrow', Arial, sans-serif;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 25px;
    line-height: 24px;
    font-size: 11px;
    background: #000;
    opacity: 0.9;
    z-index: 20;
}
.header a{
    padding: 5px 10px;
    letter-spacing: 1px;
    color: #fff;
    text-align: right;
}
.header a:hover{
    color: #ddd;
}
.header a span{
    font-weight: bold;
}
.header span.right_ab{
    position: absolute;
    right: 4px;
}
/* Top Bar */
.ib-top{
    background: #fff;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 10;
    height: 40px;
}
.ib-top h1{
    color: #333;
    font-size: 20px;
    line-height: 40px;
    padding: 0 10px;
}
.ib-top h1 span{
    color: #555;
    font-size: 12px;
}
.ib-main-wrapper{
    width: 100%;
    overflow: hidden;
    margin-top: 40px;
    outline: none;
    /*height dynamic*/
}
.ib-main{
    position: relative;
    width: 2546px;
}
.ib-main a{
    float: left;
    width: 210px;
    height: 210px;
    position: relative;
    overflow: hidden;
    margin: 0px 0px 2px 2px;
    cursor: move;
    background: #fff url(../images/thumb_bg.jpg) no-repeat center center;
    background-size: 110% 110%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.ib-main a.ib-loading,
.ib-main a.ib-loading:hover{
    background: #fff url(../images/ajax-loader.gif) no-repeat center center;
    background-size: 31px 31px;
}
.ib-main a.ib-loading img,
.ib-main a.ib-loading:hover img{
    opacity: 0.5;
}
.ib-main > a.ib-loading...

JavaScript

$(function() {
            
                var $ibWrapper    = $('#ib-main-wrapper'),
                 
                    Template    = (function() {
                            
                            // true if dragging the container
                        var kinetic_moving                = false,
                            // current index of the opened item
                            current                        = -1,
                            // true if the item is being opened / closed
                            isAnimating                    = false,
                            // items on the grid
                            $ibItems                    = $ibWrapper.find('div.ib-main > a'),
                            // image items on the grid
                            $ibImgItems                    = $ibItems.not('.ib-content'),
                            // total image items on the grid
                            imgItemsCount                = $ibImgItems.length,
                            init                        = function() {
                                
                                // add a class ib-image to the image items
                                $ibImgItems.addClass('ib-image');
                                // apply the kinetic plugin to the wrapper
                                loadKinetic();
                                // load some events
                                initEvents();
                        
                            },
                            loadKinetic                    = function() {
                                
                                setWrapperSize();
                                
                                $ibWrapper.kinetic({
                                    moved    : function() {
                                        
                                        kinetic_moving = true;
                                        
                   ...