JSFiddle - React, Tailwind, and code Playground

by Alhalabi

HTML

<!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="http://placehold.it/400x250?text=1" alt="">
    </div>
    <div class="swiper-slide"><img src="http://placehold.it/400x250?text=2" alt="">
 
    </div>
    <div class="swiper-slide"><img src="http://placehold.it/400x250?text=3" alt="">
       </div>
   <div class="swiper-slide"><img src="http://placehold.it/400x250?text=4" alt="">
       </div>
     <div class="swiper-slide"><img src="http://placehold.it/400x250?text=5" alt="">
       </div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
</div>

CSS

.swiper-container {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  /* Fix of Webkit flickering */
  z-index: 1;
}

.swiper-container-no-flexbox .swiper-slide {
  float: left;
}

.swiper-container-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0px, 0, 0);
  -moz-transform: translate3d(0px, 0, 0);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}

.swiper-container-multirow > .swiper-wrapper {
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.swiper-container-free-mode > .swiper-wrapper {
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -ms-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}


/* Auto Height */

.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}

.swiper-container-autoheight .swiper-wrapper {
  -webkit-box-align: start;
  -ms-flex-align: start;
 ...

JavaScript

! function() {
  "use strict";

  function e(e) {
    e.fn.swiper = function(a) {
      var i;
      return e(this).each(function() {
        var e = new t(this, a);
        i || (i = e)
      }), i
    }
  }
  var a, t = function(e, r) {
    function s(e) {
      return Math.floor(e)
    }

    function n() {
      b.autoplayTimeoutId = setTimeout(function() {
        b.params.loop ? (b.fixLoop(), b._slideNext(), b.emit("onAutoplay", b)) : b.isEnd ? r.autoplayStopOnLast ? b.stopAutoplay() : (b._slideTo(0), b.emit("onAutoplay", b)) : (b._slideNext(), b.emit("onAutoplay", b))
      }, b.params.autoplay)
    }

    function o(e, t) {
      var i = a(e.target);
      if (!i.is(t))
        if ("string" == typeof t) i = i.parents(t);
        else if (t.nodeType) {
        var r;
        return i.parents().each(function(e, a) {
          a === t && (r = t)
        }), r ? t : void 0
      }
      if (0 !== i.length) return i[0]
    }

    function l(e, a) {
      a = a || {};
      var t = window.MutationObserver || window.WebkitMutationObserver,
        i = new t(function(e) {
          e.forEach(function(e) {
            b.onResize(!0), b.emit("onObserverUpdate", b, e)
          })
        });
      i.observe(e, {
        attributes: "undefined" == typeof a.attributes ? !0 : a.attributes,
        childList: "undefined" == typeof a.childList ? !0 : a.childList,
        characterData: "undefined" == typeof a.characterData ? !0 : a.characterData
      }), b.observers.push(i)
    }

    function p(e) {
      e.originalEvent && (e = e.originalEvent);
      var a = e.keyCode || e.charCode;
      if (!b.params.allowSwipeToNext && (b.isHorizontal() && 39 === a || !b.isHorizontal() && 40 === a)) return !1;
      if (!b.params.allowSwipeToPrev && (b.isHorizontal() && 37 === a || !b.isHorizontal() && 38 === a)) return !1;
      if (!(e.shiftKey || e.altKey || e.ctrlKey || e.metaKey || document.activeElement && document.activeElement.nodeName && ("input" ===...