JSFiddle - React, Tailwind, and code Playground

by SpaceDog

HTML

<script src="http://trevormsmith.com/linx/jquery-1.8.3.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script src="http://trevormsmith.com/linx/js/filter.js"></script>
<script src="http://trevormsmith.com/linx/jquery.capty.min.js"></script>
<script src="http://trevormsmith.com/linx/jquery.capty.js"></script>
<script src="http://trevormsmith.com/linx/js/capty.js"></script>
<title>TMSmith</title>


<body>

	<div class="header">
	<div id="logo">
	<div><a href="index.html"><img src="img/linx.jpg" width="179" height="119" onmouseover="this.src='img/linxdark.jpg'" onmouseout="this.src='img/linx.jpg'"/></a>
	</div>
	</div>
    </div>
	

	<div id="nav">
		<ul>
			<li><a href="art.html">Art</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</div>
	
    
    
    
    
    <div id="container-all">
 		<div id="fadeopacity">
        
        
    	<div class="item">
        <a href="index.html"><img id="content" src="img/big.png" name="#content-target" width="275" height="400"/></a></div>
<div id="content-target"><span style="color: #333;"><em>Superman</em></span> | Minimalist Poster<br/><a href="index.html">Creator's Name</a> </div>
        
        <div class="item h2">
        <a href="index.html"><img id="content2" src="img/small.png"	name="#content-target2" width="275" height="194"/></a></div><div id="content-target2"><span style="color: #333;"><em>Illuminati</em></span> | Typographic Poster<br/><a href="index.html">Creator's Name</a> </div>
        
        <div class="item h3">
        <a href="index.html"><img id="content3" src="img/medium.png" name="#content-target3" width="275" height="315"/></a></div><div id="content-target3"><span style="color: #333;"><em>Lauren and Elliot to Wed</em></span> | Minimalist Poster &nbsp; &nbsp;<a href="index.html">Creator's Name</a> </div>
        
        <div class="item h2">
        <a href="index.html"><img id="content4"...

CSS

body {http://jsfiddle.net/SpaceDog/2QhVe/2/#set-as-base
	background-color: #bababa;
	font-family: 'Metrophobic', sans-serif;
}

.header {
	font-family: 'Metrophobic', sans-serif;
	width: 800px;
	height: 119px;

}

#logo{
	float: left;
	width: 179px;
	height: 119px;
	margin-top: 35px;
	margin-left: 30px;
}

#nav ul {
list-style: none;
padding: 0;
margin: 0;
}

#nav li {
	display: inline;
font-size: 18px;
float: left;
margin-top: -9px;
margin-left: 60px;
}

a:link {
	color: #9a9a9a;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #9a9a9a;
}
a:hover {
	text-decoration: none;
	color: #727272;
}
a:active {
	text-decoration: none;
	color: ;
}

.item {
animation: fadein 5s;
-moz-animation: fadein 5s;
-webkit-animation: fadein 5s;
-o-animation: fadein 5s;
}


@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
.item-m {
animation: fadein 5s;
-moz-animation: fadein 5s;
-webkit-animation: fadein 5s;
-o-animation: fadein 5s;
}


@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

.item-t {
animation: fadein 5s;
-moz-animation: fadein 5s;
-webkit-animation: fadein 5s;
-o-animation: fadein 5s;
}


@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
   ...

JavaScript

/*calling masonry*/
var mason;
$( function() {

    mason = $('#container-all, #minimalist, #typographic, #abstract').masonry({
        itemSelector: '.item, .item-m, .item-t, .item-a', 
        columnWidth: 7
});
});






/*fadein/fadeout*/
$('#btn-all').click(function(e){    
    $('#minimalist, #typographic, #abstract').fadeOut('slow', function(){
        $('#container-all').delay(1000).fadeIn('slow', function(){
            mason.masonry('layout');
        });
    });
});
$('#btn-m').click(function(e){    
    $('#container-all, #typographic, #abstract').fadeOut('slow', function(){
        $('#minimalist').delay(1000).fadeIn('slow', function(){
            mason.masonry('layout');
        });
    });
});

$('#btn-t').click(function(e){    
    $('#container-all, #minimalist, #abstract').fadeOut('slow', function(){
        $('#typographic').delay(2000).fadeIn('slow', function(){
           mason.masonry('layout');
        });
    });
});

$('#btn-a').click(function(e){    
    $('#container-all, #typographic, #minimalist').fadeOut('slow', function(){
        $('#abstract').delay(2000).fadeIn('slow', function(){
            mason.masonry('layout');
        });
    });
});