JSFiddle - React, Tailwind, and code Playground

by Ajay Patel

HTML

<script src="https://raw.github.com/razorjack/quicksand/master/jquery.quicksand.js"></script>
<script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" href="http://fancybox.net/css/style.css">
<link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css">
 <nav id="filter"></nav>

        <section id="container">
        <p>
        <a id="example1" href="http://demo.tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/assets/img/shots/1.jpg"><img src="http://demo.tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/assets/img/shots/1.jpg" alt="Illustration" /></a>
        </p>
        <p>
            <ul id="stage">
                <li data-tags="Print Design"><a class="fsand" href="http://demo.tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/assets/img/shots/1.jpg"><img src="http://demo.tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/assets/img/shots/1.jpg" alt="Illustration" /></a></li>
                <li data-tags="Logo Design,Print Design"><a class="fsand" href="http://demo.tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/assets/img/shots/2.jpg"><img src="http://demo.tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/assets/img/shots/2.jpg" alt="Illustration" /></a></li>
                <li data-tags="Web Design,Logo Design"><a class="fsand" href="http://demo.tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/assets/img/shots/3.jpg"><img src="http://demo.tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/assets/img/shots/3.jpg" alt="Illustration" /></a></li>
                <li data-tags="Web Design,Print Design"><a class="fsand" href="http://demo.tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/assets/img/shots/4.jpg"><img src="http://demo.tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/assets/img/shots/4.jpg" alt="Illustration" /></a></li>
                <li data-tags="Logo Design"><a...

CSS

/*-------------------------
    Simple reset
--------------------------*/


*{
    margin:0;
    padding:0;
}


/*-------------------------
    General Styles
--------------------------*/


html{
    background: url('../img/bg_tile.jpg') #18222b;
}

body{
    color:#fcfcfc;
    font:14px/1.3 'Segoe UI',Arial, sans-serif;
    min-height: 930px;
    background:url('../img/bg_center.jpg') center 240px no-repeat;
}

a, a:visited {
    text-decoration:none;
    outline:none;
    color:#54a6de;
}

a:hover{
    text-decoration:underline;
}


/*----------------------------
    Headers & Footers
-----------------------------*/


header{
    background:url('../img/header.png') repeat-x;
    display: block;
    height: 220px;
    padding: 10px;
}

h1{
    background:url('../img/logo.png') no-repeat center center;
    height: 80px;
    margin: 75px auto;
    overflow: hidden;
    text-align: center;
    text-indent: -99999px;
}



/*----------------------------
    Green filter bar
-----------------------------*/


#filter {
    background: url("../img/bar.png") repeat-x 0 -94px;
    display: block;
    height: 39px;
    margin: 55px auto;
    position: relative;
    width: 600px;
    text-align:center;
    
    -moz-box-shadow:0 4px 4px #000;
    -webkit-box-shadow:0 4px 4px #000;
    box-shadow:0 4px 4px #000;
}

#filter:before, #filter:after {
    background: url("../img/bar.png") no-repeat;
    height: 43px;
    position: absolute;
    top: 0;
    width: 78px;
    content: '';
    
    -moz-box-shadow:0 2px 0 rgba(0,0,0,0.4);
    -webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4);
    box-shadow:0 2px 0 rgba(0,0,0,0.4);
}

#filter:before {
    background-position: 0 -47px;
    left: -78px;
}

#filter:after {
    background-position: 0 0;
    right: -78px;
}

#filter a{
    color: #FFFFFF;
    display: inline-block;
    height: 39px;
    line-height: 37px;
    padding: 0 15px;
    text-shadow:1px 1px 1px #315218;
}

#filter a:hover{
    text-decoration:none;
}

#filter a.active{
...

JavaScript

$(document).ready(function(){
    
    var items = $('#stage li'),
        itemsByTags = {};
    
    // Looping though all the li items:
    
    items.each(function(i){
        var elem = $(this),
            tags = elem.data('tags').split(',');
        
        // Adding a data-id attribute. Required by the Quicksand plugin:
        elem.attr('data-id',i);
        
        $.each(tags,function(key,value){
            
            // Removing extra whitespace:
            value = $.trim(value);
            
            if(!(value in itemsByTags)){
                // Create an empty array to hold this item:
                itemsByTags[value] = [];
            }
            
            // Each item is added to one array per tag:
            itemsByTags[value].push(elem);
        });
        
    });

    // Creating the "Everything" option in the menu:
    createList('Everything',items);

    // Looping though the arrays in itemsByTags:
    $.each(itemsByTags,function(k,v){
        createList(k,v);
    });
    
    $('#filter a').live('click',function(e){
        var link = $(this);
        
        link.addClass('active').siblings().removeClass('active');
        
        // Using the Quicksand plugin to animate the li items.
        // It uses data('list') defined by our createList function:
        
        $('#stage').quicksand(link.data('list').find('li'),
                              function() {
                                 $("a.fsand").fancybox({
                                    'overlayShow'   : false,
                                    'transitionIn'  : 'elastic',
                                    'transitionOut' : 'elastic'
                                });  
                              });
        e.preventDefault();
    });
    
    $('#filter a:first').click();
    
    function createList(text,items){
        
        // This is a helper function that takes the
        // text of a menu button and array of li items
        
       ...