JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:340px; border:1px solid black; max-width:340px;">
    
    <ul id="navlist">
							<li>BASIC</li>
							<li class="activeStep">STANDARD</li>
							<li>SUPER</li>
							<li>ANTOHER</li>
						</ul>
    
    
<div class="m-carousel m-center m-scaled m-fade-out" id="m-carousel-example-7">
    <div class="m-carousel-inner" style="-webkit-transform: translate3d(0px, 0, 0);">
        <div class="m-item m-active">
            <div class="m-card-light">
                <img src="http://i.telegraph.co.uk/multimedia/archive/02040/Tiverton-main_2040093a.jpg">
                <p class="m-caption">BASIC PACKAGE</p>
            </div>
        </div>
        <div class="m-item">
            <div class="m-card-light">
                <img src="http://starlightcleaning.co.uk/wp-content/uploads/2011/04/School-Kitchen-Deep-Cleans-Birmingham-16.jpg">
                <p class="m-caption">STANDARD PACKAGE</p>
            </div>
        </div>
        <div class="m-item">
            <div class="m-card-light">
                <img src="http://www.ni-solutions.co.uk/images/newsimages/_1365063160_School-Kitchen-.jpg">
                <p class="m-caption">SUPER PACKAGE</p>
            </div>
        </div>
        <div class="m-item">
            <div class="m-card-light">
                <img src="http://www.wickes.co.uk/content/ebiz/wickes/resources/images/kitchenToOrder/kitchen-Casablanca.jpg">
                <p class="m-caption">ANOTHER PACKAGE</p>
            </div>
        </div>
    </div>
    <div class="m-carousel-controls">
        <a href="#" data-slide="prev">‹ Previous</a>
        <a href="#" data-slide="next">Next ›</a>
    </div>
</div>
            </div>

CSS

/* styling for this page */
.m-carousel {
    padding-bottom: 30px;
}

.m-card-light {
    width: 200px;
    margin: 30px 10px 0 10px;
}
  .m-card-dark h3 {
    margin-top: 0;
  }

  .m-item .m-card-dark img, .m-item .m-card-light img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

/*********************/

/*  Classes  on  outer  slideshow  wrapper:
    either  NONE  or  'fraction'  or  'fraction'  +  one  of  'fraction1'...'fraction10'.
        fraction  sets  box-sizing:  border-box,  so  that  padding  on  the  element  is  taken  out  ;
    either  NONE  or  'center'  or  'right'

*/
.m-carousel  {
    position:  relative;
    overflow:  hidden;
    -webkit-font-smoothing:  antialiased;  }
    .m-carousel.m-left  {
        text-align:  left;  }
    .m-carousel.m-center  {
        text-align:  center;  }
    .m-carousel.m-fluid  >  .m-carousel-inner  >  *  {
        width:  100%;  }
    .m-carousel.m-fluid.m-center  >  .m-carousel-inner  >  *:first-child  {
        margin-left:  0%;  }
    .m-carousel.m-fluid-2  >  .m-carousel-inner  >  *  {
        width:  50%;  }
    .m-carousel.m-fluid-2.m-center  >  .m-carousel-inner  >  *:first-child  {
        margin-left:  25%;  }
    .m-carousel.m-fluid-3  >  .m-carousel-inner  >  *  {
        width:  33.333%;  }
    .m-carousel.m-fluid-3.m-center  >  .m-carousel-inner  >  *:first-child  {
        margin-left:  33.333%;  }
    .m-carousel.m-fluid-4  >  .m-carousel-inner  >  *  {
        width:  25%;  }
    .m-carousel.m-fluid-4.m-center  >  .m-carousel-inner  >  *:first-child  {
        margin-left:  37.5%;  }
    .m-carousel.m-fluid-5  >  .m-carousel-inner  >  *  {
        width:  20%;  }
    .m-carousel.m-fluid-5.m-center  >  .m-carousel-inner  >  *:first-child  {
        margin-left:  40%;  }
    .m-carousel.m-fluid-6  >  .m-carousel-inner  >  *  {
        width:  16.667%;  }
    .m-carousel.m-fluid-6.m-center  >  .m-carousel-inner  >  *:first-child  {
        margin-left:  41.667%;  }
    .m-carousel...

JavaScript

var Mobify = window.Mobify = window.Mobify || {};
Mobify.$ = Mobify.$ || window.Zepto || window.jQuery;
Mobify.UI = Mobify.UI || { classPrefix: 'm-' };

(function($, document) {
    $.support = $.support || {};

    $.extend($.support, {
        'touch': 'ontouchend' in document
    });

})(Mobify.$, document);



/**
    @module Holds common functions relating to UI.
*/
Mobify.UI.Utils = (function($) {
    var exports = {}
        , has = $.support;

    /**
        Events (either touch or mouse)
    */
    exports.events = (has.touch)
        ? {down: 'touchstart', move: 'touchmove', up: 'touchend'}
        : {down: 'mousedown', move: 'mousemove', up: 'mouseup'};

    /**
        Returns the position of a mouse or touch event in (x, y)
        @function
        @param {Event} touch or mouse event
        @returns {Object} X and Y coordinates
    */
    exports.getCursorPosition = (has.touch)
        ? function(e) {e = e.originalEvent || e; return {x: e.touches[0].clientX, y: e.touches[0].clientY}}
        : function(e) {return {x: e.clientX, y: e.clientY}};


    /**
        Returns prefix property for current browser.
        @param {String} CSS Property Name
        @return {String} Detected CSS Property Name
    */
    exports.getProperty = function(name) {
        var prefixes = ['Webkit', 'Moz', 'O', 'ms', '']
          , testStyle = document.createElement('div').style;
        
        for (var i = 0; i < prefixes.length; ++i) {
            if (testStyle[prefixes[i] + name] !== undefined) {
                return prefixes[i] + name;
            }
        }

        // Not Supported
        return;
    };

    $.extend(has, {
        'transform': !! (exports.getProperty('Transform'))
      , 'transform3d': !! (window.WebKitCSSMatrix && 'm11' in new WebKitCSSMatrix()) 
    });

    // translateX(element, delta)
    // Moves the element by delta (px)
    var transformProperty = exports.getProperty('Transform');
    if (has.transform3d) {
       ...