JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:340px; border:1px solid black; max-width:340px;">
    <div class="m-carousel m-center m-scaled m-fade-out" id="m-carousel-example-7">
        <ul id="navlist">
            <li><a href='#' data-slide='1'>BASIC</a>

            </li>
            <li><a href='#' data-slide='2'>STANDARD</a>

            </li>
            <li><a href='#' data-slide='3'>SUPER</a>

            </li>
            <li><a href='#' data-slide='4'>ANTOHER</a>

            </li>
        </ul>
        <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

img {
    width:200px;
    height:150px;
}
/* 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 {

}
/*********************/

/*  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 img {
    -ms-interpolation-mode: bicubic;
}
.m-carousel-inner {
    position: relative;
    white-space: nowrap;
    text-align: center;
    /*  Removes  inline-block  gaps  due  to  whitespace  */
    font-size: 0;
    /* ...

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...