JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.css">
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<div id="home-container">

<header class="clearfix">
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
      <div class="navbar-header">
          <a class="navbar-brand" id="logo" href="http://www.asla.org"><img src="images/Logo.png"></a>
          <button type="button" class="navbar-toggle offcanvas-toggle" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="float: left;">
          <span class="sr-only">Toggle Button</span>
          <span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </span>
          </button>
      </div>
      <div class="navbar-offcanvas navbar-offcanvas-touch nav-container" id="js-bootstrap-offcanvas">
        <ul class="nav navbar-nav" id="dropdown">
          <li class="dropdown cases studies">
            <a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="false" id="main-nav">Case Studies</a>
              <ul class="dropdown-menu multi-level cases-body studies-drop cols" role="menu">
                <li class="dropdown-submenu">
                  <a href="#">U.S. Mid-Atlantic</a>
                    <ul class="dropdown-menu" role="menu">
                      <p class="category-cases"><a...

CSS

@charset "UTF-8";
/* CSS Document Baseline*/

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px !important;
	color:#444444;
	line-height:18px !important;
	padding:0;
	margin:0;
	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
}

a{
  outline: none;
}

.focus {
	outline: 0;
}


body a:link, 
body a:visited {
	color:#f26526;
	text-decoration:none;
}

body a:hover {
	text-decoration:underline;
}

.row {
	margin-right: 0px !important;
	margin-left: 0px !important;
}

.container-fluid {
	padding-right: 0px !important;
	padding-left: 0px !important;
}

#home-container {
	width:1160px;
	margin: 0 auto;
	position:relative;
	max-width: 100%;
	/*border:1px solid #808285;*/

}

.navbar-default .navbar-nav > li > a {
	color: #fff !important;
	background-color: #00AEEF;
	font-size: 18px;
	text-transform: uppercase;
}

.clear {
	clear:both;
}

.thumbnail-bar {
	z-index:50; 
	max-width: 100%; 
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}

.textleft, .textright {
	cursor:pointer;
	color:#f26526;
	background:none;
}

.textright {
	margin-left: 770px;
}

.textleft {
	animation: myfirst 8s;
	-moz-animation:myfirst 8s; /* Firefox */
	-webkit-animation:myfirst 8s; /* Safari and Chrome */
	-o-animation:myfirst 8s; /* Opera */
}

.title {
	padding:30px 25px 25px 25px;
	text-align: center;
}

.title a {
	text-decoration: none !important;
}

.title .design {
	font-family: "Work Sans", "Helvetica", "Arial", sans-serif;
	font-weight: 200;
	font-size: 3.7rem;
	color: #d4d4d4;
}

.title .sustainable {
	font-family: "Work Sans", "Helvetica", "Arial", sans-serif;
	font-weight: 200;
	font-size: 3.7rem;
	color: #666666;
}


/*THUMBNAIL SLIDES_______________________________________________________________________________ */

div.scrollable {
	position:relative;	 	
	width: 960px;	
	height:580px;
	margin:0 auto;
	/* custom decorations */
	padding:7px 0;	
}

.slick-prev {

left: -6%;

	animation: myfirst 8s;
	-moz-animation:myfirst 8s; /* Firefox...

JavaScript

$(document).ready(function(){
  $('.scrollable').slick({
		dots: false,
  	slidesToShow: 1,
  	slidesToScroll: 3,
  	swipeToSlide: true,
  	swipe: true,
  	arrows: true,
    infinite: false,
    onAfterChange: afterChange

  var afterChange = function(slide, index) {
    if(index === 2) {
      $('.slick-next').css('pointer-events', 'none')
    }
    else {
      $('.slick-next').css('pointer-events', 'all')
    }
  }

  var afterChange = function(slide, index) {
    if(index === 0) {
      $('.slick-prev').css('pointer-events', 'none')
    }
    else {
      $('.slick-prev').css('pointer-events', 'all')
    }
  }
});


(function() {
  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

  (function($, window) {
    var Offcanvas, OffcanvasDropdown, OffcanvasTouch, transformCheck;
    OffcanvasDropdown = (function() {
      function OffcanvasDropdown(element) {
        this.element = element;
        this._clickEvent = __bind(this._clickEvent, this);
        this.element = $(this.element);
        this.dropdown = this.element.parent().find(".dropdown-menu");
        this.element.on('click', this._clickEvent);
      }

      OffcanvasDropdown.prototype._clickEvent = function(e) {
        if (!this.dropdown.hasClass('shown')) {
          e.preventDefault();
        }
        this.dropdown.toggleClass("shown");
        return this.element.parent().toggleClass('active');
      };

      return OffcanvasDropdown;

    })();
    OffcanvasTouch = (function() {
      function OffcanvasTouch(button, element, location, offcanvas) {
        this.button = button;
        this.element = element;
        this.location = location;
        this.offcanvas = offcanvas;
        this._getFade = __bind(this._getFade, this);
        this._getCss = __bind(this._getCss, this);
        this._touchEnd = __bind(this._touchEnd, this);
        this._touchMove = __bind(this._touchMove, this);
        this._touchStart = __bind(this._touchStart, this);
      ...