JSFiddle - React, Tailwind, and code Playground

by jrweinb

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<section id="filtre" class="clearfix">
	<div class="option-set " data-option-key="filter" >									
	 <ul class="nav-filtre">  
		Filtre :
   	<li class="active"><a href="#" rel="tout" data-option-value="*">Tout</a></li>
	<li class=""><a href="#"  data-option-value=".concerts">Concert</a></li>
	<li class=""><a href="#"  data-option-value=".vie">Instants de vie</a></li>	 
	<li class=""><a href="#"  data-option-value=".divers">Divers</a></li>                                             
		 </ul>  
 </div>
</section>
				
<div id="containerGalerie">					
		<div class="element concerts" data-category="concerts">
			<a href="http://samsnow.alwaysdata.net/wp-content/themes/bones/library/images/galerie/concerts/Debout Sur Le Zinc 2.jpg" class="fancybox-perso" rel="gallery1" title="Debout Sur Le Zinc 2">
     		<img class="photo-galerie" src="http://samsnow.alwaysdata.net/wp-content/themes/bones/library/images/galerie/concerts/mini/Debout Sur Le Zinc 2.jpg"/>
			</a>
		</div>
    
    <div class="element divers" data-category="divers">
					<a href="http://samsnow.alwaysdata.net/wp-content/themes/bones/library/images/galerie/divers/Goutte d'eau (2).jpg" class="fancybox-perso" rel="gallery1" title="Goutte d'eau (2)">
						<img class="photo-galerie" src="http://samsnow.alwaysdata.net/wp-content/themes/bones/library/images/galerie/divers/mini/Goutte d'eau (2).jpg"/>
					</a>
					</div><div class="element concerts" data-category="concerts">
					<a href="http://samsnow.alwaysdata.net/wp-content/themes/bones/library/images/galerie/concerts/La limace explosive.jpg" class="fancybox-perso" rel="gallery1" title="La limace explosive">
						<img class="photo-galerie" src="http://samsnow.alwaysdata.net/wp-content/themes/bones/library/images/galerie/concerts/mini/La limace explosive.jpg"/>
					</a>
					</div><div class="element divers" data-category="divers">
					<a...

CSS

#containerGalerie {  
  padding: 0px;
  margin:0px auto 0 auto; 
}

.element {	
	float: left;
	width:338px;
	padding:0;
	margin : 0px;	
}
.element img {
    max-width: 100%;
    margin: 0px;
    box-shadow: 0px 0px 3px rgba(34, 25, 25, 0.5);
}

.nav-filtre li{
	display:inline-block;
	padding: 2px 7px 2px 7px;
	margin: 5px 2px 5px 2px;
	background: none repeat scroll 0% 0% rgb(255, 255, 255);
	box-shadow: 0px 1px 3px rgba(34, 25, 25, 0.4);
}

/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

JavaScript

jQuery(window).ready(function($){ 
var $container = jQuery('#containerGalerie');
var columns = 4,
setColumns = function() { 
    ecran = jQuery(document).width();
    if(ecran>1630){
        columns = 5;
    }
    else if(ecran>1280){
        columns = 4;
    }
    else if(ecran>710){
        columns = 3;
    } 
    else if(ecran>345){
        columns = 2;
    }
    else{
        columns = 1;
    };
    largeur=100/columns - 0.5;
    jQuery('.element').css('width', getLargeur);
    function getLargeur(){
        return largeur +'%';
    }
};
setColumns();
	
jQuery(window).smartresize(function(){
	setColumns();
	$container.isotope({
		itemSelector : '.element',
		resizable: false, // disable normal resizing
		 // set columnWidth to a percentage of container width
		masonry: { columnWidth: $container.width() / columns}
	});	
}).smartresize();
	
$container.imagesLoaded( function(){
    jQuery(window).smartresize();     
});


var $optionSets = jQuery('.option-set'),
    $optionLinks = $optionSets.find('a');

$optionLinks.click(function(){	
    var $this = jQuery(this);    
    var $optionSet = $this.parents('.option-set');
    $optionSet.parent().find('.active').removeClass('active');
    $this.parent().addClass('active');
    
    // make option object dynamically, i.e. { filter: '.my-filter-class' }
    var options = {},
        key = $optionSet.attr('data-option-key'),
        value = $this.attr('data-option-value');
    // parse 'false' as false boolean
    value = value === 'false' ? false : value;
    options[ key ] = value;
    if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
        // changes in layout modes need extra logic
        changeLayoutMode( $this, options );
    } else {
        // otherwise, apply new options
        $container.isotope( options );
    }
    jQuery(".isotope-item a").attr("rel", "visible");
    jQuery(".isotope-hidden a").attr("rel", "nonvisible"); 
    $container.isotope('reLayout');
   ...