JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://visuals.motocom.co.uk/bootstrap-v4/assets/scripts/vendor/snap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<div class="drawers">
  <div class="drawer drawer-left">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nisl eget leo interdum vulputate at id nunc. Aliquam maximus metus quis diam laoreet vehicula. Suspendisse nec nisi ut sem consequat auctor id id tellus. Praesent varius in metus ac
    porttitor. Praesent ut augue eu felis rhoncus consectetur. Suspendisse pulvinar facilisis nibh sit amet convallis. Etiam rhoncus, nunc at volutpat pellentesque, mauris diam lobortis ligula, sed condimentum dolor sem eget libero. Nulla dignissim, velit
    vitae bibendum sodales, leo diam ullamcorper augue, at viverra orci dolor id diam. Suspendisse congue enim nec blandit porta.

  </div>
  <div class="drawer drawer-right"></div>
</div>

<div id="content" class="content">

  <div class="container">

    <section id="carousel" class="regular slider">
      <div>
        <div class="sslide sslide-1">
          Slick Slider 1
        </div>
      </div>
      <div>
        <div class="sslide sslide-2">
          Slick Slider 2
        </div>
      </div>
      <div>
        <div class="sslide sslide-3">
          Slick Slider 3
        </div>
      </div>
      <div>
        <div class="sslide sslide-4">
          Slick Slider 4
        </div>
      </div>
      <div>
        <div class="sslide sslide-5">
          Slick Slider 5
        </div>
      </div>
   ...

SCSS

/* bootstrap vendors
-------------------------------------------------- */

// core variables and mixins
@import "https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.min.css";

/* test
-------------------------------------------------- */

HTML,
BODY {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0275d8;
}

.drawers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  .drawer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 250px;
    height: 100%;
    overflow-y: scroll;
    color: #ffffff;
    @include transition-property(top, bottom);
    @include transition-duration(.2s, .2s);
    @include transition-timing-function(linear, linear);
    -webkit-overflow-scrolling: touch;
    padding: 30px;
    &.drawer-left {
      left: 0;
    }
    &.drawer-right {
      right: 0;
      display: none;
    }
  }
}

#content {
  padding: 20px 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  z-index: 2;
  background: #ffffff;
  overflow: auto;
  @include transition-property(top, bottom);
  @include transition-duration(.2s, .2s);
  @include transition-timing-function(linear, linear);
  -webkit-overflow-scrolling: touch;
  .snapjs-left & {
    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #ffffff;
      opacity: 0;
      cursor: move;
      cursor: grab;
      cursor: -webkit-grab;
      cursor: -moz-grab;
    }
  }
}

#carousel {
  margin-bottom: 1rem;
  cursor: move;
  cursor: grab;
  cursor: -webkit-grab;
  cursor: -moz-grab;
}


.sslide {
  height: 150px;
  width: 100%;
  line-height: 150px;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 300;
  text-align: center;
  
  &.sslide-1 {
    background-color: #0275d8;
  }
  
  &.sslide-2 {
    background-color: #5cb85c;
  }
  
  &.sslide-3 {
    background-color: #5bc0de;
 ...

JavaScript

/**
 ** pure js
 **/

// snap event
var addEvent = function addEvent(element, eventName, func) {
  if (element.addEventListener) {
    return element.addEventListener(eventName, func, false);
  } else if (element.attachEvent) {
    return element.attachEvent("on" + eventName, func);
  }
};

// snap parmas
var snapper = new Snap({
  element: document.getElementById('content'),
  disable: 'right',
  maxPosition: 250,
  minPosition: -250,
  transitionSpeed: .2
});

// snap button click function
addEvent(document.getElementById('ol'), 'click', function() {
  snapper.open('left');
});

/**
 ** jQuery functions
 **/
(function($) {

  // slick slider
  $('#carousel').slick({
    dots: false,
    prevArrow: false,
    nextArrow: false
  });

})(jQuery);