JSFiddle - React, Tailwind, and code Playground

HTML

<!-- portfolio item formatting -->
<div class="portfolioSingle">

  <div class="bg"></div>
  <div class="imageHolder scaleframe"></div>

  <div class="controls">

    <div class="info">
      <div class="title">
        <h2></h2></div>
      <div class="date">
        <span class="day"></span>
        <span class="month"></span>
        <span class="year"></span>
      </div>
      <nav>
        <span class="previous faIcon arrowLeft"></span>
        <span class="zoomout faIcon searchminus"></span>
        <span class="next faIcon arrowRight"></span>
        <span class="zoom faIcon searchplus"></span>
      </nav>
    </div>

    <div class="one tight">
      <p></p>
    </div>

    <span class="close faIcon crosscircle"></span>

  </div>

</div>
<!-- end portfolio item formatting-->

<!-- Start portfolio item -->
<div class="onehalf tight row mix web" 
      data-mediaType="image" 
       data-largeImage="images/portfolio/large/1.jpg" 
       data-title="TRUE GANGSTERS" 
       data-description="Pellentesque in mattis nisi, nec blandit magna. Nam et bibendum diam. Donec nec iaculis massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris malesuada, purus eu pulvinar vehicula, elit lacus aliquet mi, nec rutrum purus tortor sed quam. Curabitur laoreet auctor lacinia. Phasellus tempus enim id dolor suscipit consectetur. Nunc eu iaculis enim."
data-date="15,DECEMBER,2013"
data-video="CdDDY5nVA3A">
  <figure>
    <img class="scaletofit" src="images/portfolio/thumbs/1.jpg" alt="">
    <div class="over"><span class="faIcon search"></span></div>
  </figure>
  <span class="caption">TRUE GANGSTERS</span>
</div>
<!-- End portfolio item -->

JavaScript

/////////////////////////////////////////////////////////////////////////////////////////////////////////
	//PORTFOLIO
	/////////////////////////////////////////////////////////////////////////////////////////////////////////
	function initPortfolio() {

	  if ($('.portfolio').length) {

	    var portfolio = $('.portfolio');
	    var portfolioSingle = $('.portfolioSingle');
	    var imgHolder = portfolioSingle.find('.imageHolder');
	    var controls = portfolioSingle.find('.controls');
	    var next = controls.find('.next');
	    var previous = controls.find('.previous');
	    var zoom = controls.find('.zoom');
	    var zoomout = controls.find('.zoomout');
	    var closeBtn = controls.find('.close');
	    var curItem = 0;
	    var total = portfolio.find('.mix').length;
	    var timeout;
	    var ratio = 0;
	    var firstLoad = true;
	    var controlsHeight = 195;
	    var imagePadding = 100;

	    //initiate filters
	    portfolio.mixitup();

	    //thumbs
	    portfolio.find('.mix').each(function(i) {

	      var th = $(this);

	      th.click(function() {

	        curItem = i;

	        portfolio.fadeOut();

	        //remove scrollbars
	        //$('body').addClass('noscrollbar');

	        var t = $(this);

	        //launch single
	        portfolioSingle.addClass('visible');
	        portfolioSingle.find('.bg').addClass('animate');
	        portfolioSingle.find('.controls').addClass('animate');

	        //Text
	        updateText(t);
	        loadImage(t);


	        if (isMobile && contWidth <= 420) {
	          clearTimeout(timeout);
	          timeout = setTimeout(function() {
	            zoom.click();
	          }, 1000);
	        }



	      }); //End thumbs


	    });

	    //single nav
	    next.click(function() {

	      if (curItem < total - 1) {
	        curItem++;
	      } else {
	        curItem = 0;
	      }

	      var t = portfolio.find('.mix').eq(curItem);
	      updateText(t);
	      loadImage(t);


	    }); //End next click

	   ...