JSFiddle - React, Tailwind, and code Playground

by jackbouba

HTML

<div class="homepage_wrapper">
  <div class="test-story-wrap">
    <div class="test-story">
      <ul class="story-nav"></ul>
      <div class="story-slides royalSlider rsDefault">
        <div class="story-slide slide-3">
          <div class="rsTmb">Backstage Pass</div>
        </div>
        <div class="story-slide slide-4">
          <h2>Find your trip</h2>
          <form class="trip-finder">
            <div class="custom-select">
              <select name="terms">
                <option value="anywhere">Anywhere</option>
                <option value="asia">Asia</option>
                <option value="australia">Australia</option>
                <option value="new-zealand">New Zealand</option>
              </select>
            </div>
            <div class="custom-select">
              <select>
                <option>Any month</option>
                <option>September 2012</option>
                <option>October 2012</option>
                <option>November 2012</option>
              </select>
            </div>
            <div class="custom-select">
              <select>
                <option>Any length</option>
                <option>1-2 weeks</option>
                <option>3-4 weeks</option>
                <option>More than 4 weeks</option>
              </select>
            </div>
            <input type="submit" class="button-style" value="Search!" />
          </form>
          <div class="rsTmb">The world awaits</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

/* v1.0.2 */
/* Core RS CSS file. 95% of time you shouldn't change anything here. */
.royalSlider {
    width: 600px;
    height: 400px;
    position: relative;
    direction: ltr;
}

.rsWebkit3d .rsSlide,
.rsWebkit3d .rsContainer,
.rsWebkit3d .rsThumbs,
.rsWebkit3d .rsPreloader,
.rsWebkit3d img,
.rsWebkit3d .rsOverflow,
.rsWebkit3d .rsBtnCenterer,
.rsWebkit3d .rsAbsoluteEl {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0); 
}
.rsFade.rsWebkit3d .rsSlide,
.rsFade.rsWebkit3d img,
.rsFade.rsWebkit3d .rsContainer {
    -webkit-transform: none;
}
.rsOverflow {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    float: left;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

.rsContainer {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

.rsArrow,
.rsThumbsArrow {
    cursor: pointer;
}

.rsThumb {
    float: left;
    position: relative;
}

.rsArrow,
.rsNav,
.rsThumbsArrow {
    opacity: 1;
    -webkit-transition:opacity 0.3s linear;
    -moz-transition:opacity 0.3s linear;
    -o-transition:opacity 0.3s linear;
    transition:opacity 0.3s linear;
}
.rsHidden {
    opacity: 0;
    visibility: hidden;
    -webkit-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
    -moz-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
    -o-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
    transition:visibility 0s linear 0.3s,opacity 0.3s linear;
}


.rsGCaption {
    width: 100%;
    float: left;
    text-align: center;
}

/* Fullscreen options, very important ^^ */
.royalSlider.rsFullscreen {
    position: fixed !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2147483647 !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
}

.royalSlider .rsSlide.rsFakePreloader {
    opacity: 1 !important;
...

JavaScript

// jQuery RoyalSlider plugin. Custom build. Copyright 2011-2012 Dmitry Semenov http://dimsemenov.com 
// jquery.royalslider v9.2.0
(function(k){function t(b,e){var c=navigator.userAgent.toLowerCase(),g=k.browser,a=this,f=g.webkit;c.indexOf("android");a.isIPAD=c.match(/(ipad)/);for(var d=document.createElement("div").style,i=["webkit","Moz","ms","O"],h="",j=0,m,c=0;c<i.length;c++)m=i[c],!h&&m+"Transform"in d&&(h=m),m=m.toLowerCase(),window.requestAnimationFrame||(window.requestAnimationFrame=window[m+"RequestAnimationFrame"],window.cancelAnimationFrame=window[m+"CancelAnimationFrame"]||window[m+"CancelRequestAnimationFrame"]);
window.requestAnimationFrame||(window.requestAnimationFrame=function(a){var b=(new Date).getTime(),c=Math.max(0,16-(b-j)),d=window.setTimeout(function(){a(b+c)},c);j=b+c;return d});window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)});a.slider=k(b);a.ev=k({});a._a=k(document);a.st=k.extend({},k.fn.royalSlider.defaults,e);a._b=a.st.transitionSpeed;if(a.st.allowCSS3&&(!f||a.st.allowCSS3OnWebkit))c=h+(h?"T":"t"),a._c=c+"ransform"in d&&c+"ransition"in d,a._c&&(a._d=h+
(h?"P":"p")+"erspective"in d);h=h.toLowerCase();a._e="-"+h+"-";a._f="vertical"===a.st.slidesOrientation?!1:!0;a._g=a._f?"left":"top";a._h=a._f?"width":"height";a._i=-1;a._j="fade"===a.st.transitionType?!1:!0;a._j||(a.st.sliderDrag=!1,a._k=10);a._l=0;a._m=0;k.each(k.rsModules,function(b,c){c.call(a)});a.slides=[];a._n=0;(a.st.slides?k(a.st.slides):a.slider.children().detach()).each(function(){a._o(this,true)});a.st.randomizeSlides&&a.slides.sort(function(){return 0.5-Math.random()});a.numSlides=a.slides.length;
a._p();a.st.startSlideId>a.numSlides-1&&(a.st.startSlideId=a.numSlides-1);a.staticSlideId=a.currSlideId=a._q=a.st.startSlideId;a.currSlide=a.slides[a.currSlideId];a._r=0;a.slider.addClass((a._f?"rsHor":"rsVer")+(a._j?"":" rsFade"));d='<div class="rsOverflow"><div...