JSFiddle - React, Tailwind, and code Playground

HTML

<div class="GITheWall panel-widget-style"><div class="GI_TW_expander"><i class="GI_TW_arrow GI_TW_prev GI_TW_Controls GI_TW_hidden"><span class=""></span></i><i class="GI_TW_arrow GI_TW_next GI_TW_Controls"><span class=""></span></i><div class="GI_TW_close GI_TW_Controls"><span class="fa fa-times"></span></div><div class="GI_TW_pointer"></div><div class="GI_TW_expander-inner"></div></div><h3 class="widget-title">Our Team</h3><ul>
<li id="person-130" class="item item-person" data-contenttype="inline" data-href="#extra-content_130">


		    

		        
		            <div class="inner">
		            	<img width="890" height="1200" src="http://chris-mousdales-macbook-pro.local:5757/content/uploads/2015/02/willluis-513x692.jpg" class="attachment-person wp-post-image" alt="willluis" style="">		                <!-- <img src="//placehold.it/253" alt="Paul Holt" /> -->
		                <div class="caption">
		                    <div class="inner-text" style="height: 72px;">
		                        <p>
		                        	<strong class="name">Paul Holt</strong>
		                        </p>
		                        <p>
		                        	<small></small>
		                        </p>
		                        	                            <p class="email"><a href="mailto:[email protected]"><i class="fa fa-envelope-square"></i> [email protected]</a></p>
	                            	                            	                            <p class="tel"><a href="tel:+01534888003"><i class="fa fa-phone-square"></i> 01534 888003</a></p>
	                            		                    </div>
		                    <p><a href="#" id="link" class="btn highlight">Find out more</a></p>
		                </div>
		            </div>

	<footer class="entry-footer">
			</footer><!-- .entry-footer -->
</li><!-- #post-## -->
<script type="text/template" id="extra-content_130">
	<p>Paul began a career in IT at Jersey Telecom aged 17, as part of the original Broadband...

CSS

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit
}

@font-face {
    font-family: 'hero_lightlight';
    src: url("fonts/Hero Light-webfont.eot");
    src: url("fonts/Hero Light-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Hero Light-webfont.woff2") format("woff2"), url("fonts/Hero Light-webfont.woff") format("woff"), url("fonts/Hero Light-webfont.ttf") format("truetype"), url("fonts/Hero Light-webfont.svg#hero_lightlight") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'heroregular';
    src: url("fonts/Hero-webfont.eot");
    src: url("fonts/Hero-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Hero-webfont.woff2") format("woff2"), url("fonts/Hero-webfont.woff") format("woff"), url("fonts/Hero-webfont.ttf") format("truetype"), url("fonts/Hero-webfont.svg#heroregular") format("svg");
    font-weight: normal;
    font-style: normal
}

.site-content {
    padding: 4em 0
}

@media screen and (min-width: 720px) {
    .main-col, .site-main.blog {
        float: left;
        display: block;
        margin-right: 3.7442604232%;
        width: 65.4185798589%
    }

    .main-col:last-child, .site-main.blog:last-child {
        margin-right: 0
    }

    .main-col__right {
        float: left;
        display: block;
        margin-right: 3.7442604232%;
        width: 74.0639348942%
    }

    .main-col__right:last-child {
        margin-right: 0
    }

    .sidebar {
        float: left;
        display: block;
        margin-right: 3.7442604232%;
        width: 22.1918046826%
    }

    .sidebar:last-child {
        margin-right: 0
    }

    .sidebar.sidebar__right {
        float: left;
        display: block;
        margin-right: 3.7442604232%;
        width: 30.8371597179%;
        margin-right: 0
    }

   ...

JavaScript

/*!
 *
 * Version 0.1.10
 * This class could be used to create image wall similar to the google image search
 * Copyright Gold Interactive 2013
 * Author: Gianluca Guarini
 *
 */

(function (document, window, $document, $window, $body, $) {
  'use strict';

  /**
   *
   * Dependencies
   *
   */
  $.support.transition = (function () {

    var transitionEnd = (function () {

      var el = document.createElement('GI'),
        transEndEventNames = {
          'WebkitTransition': 'webkitTransitionEnd',
          'MozTransition': 'transitionend',
          'OTransition': 'oTransitionEnd otransitionend',
          'transition': 'transitionend'
        },
        name;

      for (name in transEndEventNames) {
        if (el.style[name] !== undefined) {
          return transEndEventNames[name];
        }
      }

    }());

    return transitionEnd && {
      end: transitionEnd
    };

  })();
  var GI_TW_ID = 0,
    TheWall = function ($el, myOptions) {

      /*
       *
       * GLOBAL PROTECTED VAR
       *
       */

      var self = this,
        defaultOptions = {
          // Callbacks API
          onBeforeInit: null,
          onReady: null,
          onViewPortUpdate: null,
          onItemChange: null,
          onDestroy: null,
          onShow: null,
          onHide: null,
          onContentLoading: null,
          onContentLoaded: null,
          margin: {
            top: 10,
            bottom: 10
          },
          scrollerElm: null,
          scrollOffset: 150,
          // settings
          arrows: true,
          closebutton: true,
          keyboardNavigation: true,
          animationSpeed: 300,
          autoscroll: true,
          responsive: true,
          initialWrapperHeight: 600,
          dynamicHeight: true,
          nextButtonClass: '',
          prevButtonClass: '',
          closeButtonClass: ''
        },
        istouch = 'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch,
       ...