JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script src="https://raw.github.com/zonear/isotope-perfectmasonry/master/jquery.isotope.perfectmasonry.js"></script>
<div id="outer-container">

<div id="header">
</div>

<div id="container" class="iso-container clearfix infinite-scrolling">

<div class="element blog portfolio download" id="_0" style="background:none;">
<div id="menu-container">
<div id="menu-2">
<section id="options">
<div class="option-set" data-option-key="filter">
<a class="menu-title-2" data-option-value="*">All</a>
<a class="menu-title-2" data-option-value=".portfolio">Portfolio</a>
<a class="menu-title-2" data-option-value=".blog">Blog</a>
<a class="menu-title-2" data-option-value=".download">Download</a>
</div>
</section>
</div>
</div>
</div>

<div class="element blog" id="_13" ><span class="name" style="display:none;">Formlabs: an affordable printer</span>
<a class="ajaxify" href="#dock" onclick="gestionClic('compteur13');">
<div class="element-image">
<img src="./Post thumbnail images/formlabs.jpg" width="250" height="180"/>
<div class="overlay"></div>
<div class="mask"><div hrefmore="more."></div><div hrefviews="&nbsp;views"></div><div id="compteur13" class="compteur"></div></div></div>
<div class="description">
<div class="close-button">&#10006;</div>
<p class="description-title">UltraSlim case for iPhone 5</p>
<p class="description-subtitle">PORTFOLIO</p>
<p class="description-text"> Case for the iPhone 5. This case allows a protection of the sides and the back of the case.
Features :<br><br>
- Only 0.5mm wall thickness<br>
- Full access to connectors<br>
- Protection of the polished sides and back in aluminium<br>
- Fully transparent<br><br>
If you need further information, please don't hesitate to contact me.
Case for the iPhone 5. This case allows a protection of the sides and the back of the case.
Features :<br><br>
- Only 0.5mm wall thickness<br>
- Full access to connectors<br>
- Protection of the polished...

CSS

.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;
}

/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}
ul {
list-style-type: none;
}
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 10px;
}
.overlay {
	position: absolute;
	z-index: 2;
    width: 100%;
	height: 100%;
    margin: 0;
	padding-right: 0px;
	top: 0px;
	left: 0px;
	text-align: right;
	line-height: 25px;
	-webkit-box-shadow: inset 0px 0px 12px rgba(0,0,0,0.4);
	-moz-box-shadow: inset 0px 0px 12px rgba(0,0,0,0.4);
	box-shadow: inset 0px 0px 12px rgba(0,0,0,0.4);
}
.overlay:after {
    width:170%;
    height:100%;
    position:absolute;
    top:-55%;
    left:-60%;
    display:block;
    content:"";
    background:rgba(255,255,255,0.07);
   ...

JavaScript

$(function(){
    
      var $container = $('#container'),
		  $items = $('.element');
		  
      $container.isotope({
        itemSelector : '.element',
      });
	  
	  $container.delegate( '.element', 'click', function(){
		var $this = $(this);
		var $previousLargeItem = $items.filter('.large');
		if ( $this.hasClass('large') ) {
     		 return;
    		}	
    	$previousLargeItem.toggleClass('large');		
		$previousLargeItem.children().children('.description').toggle();
		$previousLargeItem.children().children('.element-image').toggle();
		$previousLargeItem.children().children('.overlay').toggle();		
		$(this).children().children('.description').toggle();
		$(this).children().children('.element-image').toggle();
		$(this).children().children('.overlay').toggle();
        $(this).toggleClass('large');
        $container.isotope('reLayout');		
      });
	  
	  $('.close-button').click(function(){
		$('.large').toggleClass('element');
		$('.large').children().children('.description').toggle();
		$('.large').children().children('.element-image').toggle();
		$('.large').children().children('.overlay').toggle();
        $container.isotope('reLayout');	
      });    
		     
      var $optionSets = $('#options .option-set'),
          $optionLinks = $optionSets.find('a');

      $optionLinks.click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
  
        // 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 ===...