JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://c9.io/aaronkahlhamer/isotope/workspace/js/sticky.plugin.v1.0.0.js"></script>
<script src="http://coloredge.catch24dev.com/wp-content/themes/coloredge/js/isotope.pkgd.min.js?ver=2.1"></script>
       

<div id="landing-page">
        
    
	

  	<div class="lp-logo">
  		<img style="" src="" alt=""/>
  	</div>
  
	<ul id="lp-filters" class="lp-option-set">
	  <li><a class="lp-selected" href="#filter=*" data-filter="*">show all</a></li>
	  <li><a href="#filter=.lp-belle-brunches">lp-belle-brunches</a></li>
	  <li><a href="#filter=.lp-oh-la-la-date-nights">lp-oh-la-la-date-nights</a></li>
	  <li><a href="#filter=.lp-fpo-pleat-refinement">lp-fpo-pleat-refinement</a></li>
	  <li><a href="#filter=.lp-fpo-refinement">lp-fpo-refinement</a></li>
	  <li><a href="#filter=.lp-instagram-refinement">lp-instagram-refinement</a></li>
	  <li><a href="#filter=.lp-about">lp-about</a></li>
	</ul>

    
    <ul id="lp-isotope" class="clearfix">
	    <li class="element lp-belle-brunches">
            <img class="lp-cliche" src="http://farm8.staticflickr.com/7080/7139617129_950ef8dd88_n.jpg"/>
	      <div class="lp-inactive">
	      		<iframe width="560" height="315" src="//www.youtube.com/embed/xNsGNlDb6xY" frameborder="0" allowfullscreen></iframe>
	      		<span class="lp-close">&#215;</span>
	      </div>
	    </li>
	    
	          
	    <li id="lp-etre-un" class="element lp-oh-la-la-date-nights lp-toggler">
	    	<img class="lp-cliche" src="http://farm8.staticflickr.com/7310/8749821980_a1ce80664a_n.jpg"/>
	       <div class="lp-inactive">
	       		<ul class="lp-dynamique"></ul>
	      		<a href="">shop all</a>
	      		<span class="lp-close">&#215;</span>
	      	</div>
	    </li>
	    
	          
	    <li id="lp-etre-deux" class="element lp-fpo-pleat-refinement">
            <img src="http://farm1.staticflickr.com/139/357705997_abb6d7916d_n.jpg" />
	      <div class="lp-inactive">
	      		<ul class="lp-dynamique"></ul>
	      		<a href="">shop all</a>
	   ...

CSS

/*===================================
    MAIN TEMPLATE ITEMS
=====================================*/

#landing-page {
  display:block;
  margin: 0 auto;
  margin-top: -75px;
  overflow:hidden;
  position: relative;
  width: 985px;
}

#facebook-like {
  color: #fff;
  font-size: 14px;
  font-family: Helvetica, Arial, sans-serif;
  height: 30px;
  margin: 0;
  padding: 10;
  position:absolute;
  right:14px;
  text-align: right;
  top:30px;
  width: 100%;
  z-index:999;
}

#facebook-like iframe {
  vertical-align: middle;
  padding: 0px 0px 0px 5px;
}

/*===================================
    BOILERPLATE
=====================================*/

.lp-logo,
.lp-logo img,
.lp-nav,
.lp-nav li,
.lp-nav a,
#lp-isotope,
#lp-isotope ul,
#lp-isotope li,
.isotope-item,
.isotope-hidden.isotope-item,
.element,
#lp-filters,
#lp-filters li,
#lp-filters a,
.lp-landscape,
.lp-green-room,
.lp-dissimule,
.lp-close {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin:0;
  padding:0;
  border:0;
}

/*===================================
    ISOTOPE STYLES
=====================================*/

/* required for containers to inherit vertical size from window */
html,
body {
  height: 100%;
}

/**** Isotope Filtering ****/

#lp-isotope {
  position:relative;
  min-height:700px;
  width:996px;
}
#lp-isotope li {
  margin:0 11px 11px 0;
}
.element {
  background-color:#ccc;
  display:inline-block!important;
  height: 320px; 
  overflow: hidden;
  position: relative;
  width: 238px;
}
.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 {
 ...

JavaScript

////////////////////////////////////////////////////////
////////////////////////ISOTOPE/////////////////////////
////////////////////////////////////////////////////////

 $(function () {
     var $container = $('#lp-isotope');
     $container.isotope({
        onLayout: function( $elems ) {
          // options 
        }// end options
     });

//////// Keep column width to a minimum so blocks align properly when enlarged.
      $container.isotope({
          itemSelector: '.element',
            masonry : {
            columnWidth : 1
          }
      });

//////// change background depending on user's time
//////// change filter depending on user's time
        /*datetoday = new Date();
        timenow = datetoday.getTime();
        datetoday.setTime(timenow);
        thehour = datetoday.getHours();
            if (thehour >= 17) {
                $('#frame').addClass('lp-night');
                $('#lp-isotope').isotope({
                    filter: '.lp-oh-la-la-date-nights',
                });
            }
            else if (thehour >= 8) {
                $('#frame').addClass('lp-morning');
                // $('#lp-filters a:eq(4)').addClass('lp-selected');
                // $('#lp-filters a:eq(0)').removeClass('lp-selected');
                $('#lp-isotope').isotope({
                    filter: '.lp-fpo-refinement',
                });
            }
            else {
                $('#frame').addClass('lp-night');
                $('#lp-isotope').isotope({
                    filter: '*',
                });
            }*/

//////// Filter items when filter link is clicked.
     $('.lp-option-set a').click(function () {
         var selector = $(this).attr('data-filter');
         $container.isotope({
             filter: selector,
         });
         var href = $(this).attr('href').replace(/^#/, ''),
             // convert href into object
             // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
            ...