JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="mm-slider__nav">
	<div class="mm-slider__nav_btn" data-slide-target=0>1. Create account</div>
	<div class="mm-slider__nav_btn" data-slide-target=1>2. Connect your Calendar</div>
	<div class="mm-slider__nav_btn" data-slide-target=2>3. Customize your SMS</div>
</div>

<div class="mm-slider__slides">

    <div class="mm-slider__slide is-active" data-slide-id=0>
        Create account
    </div>

    <div class="mm-slider__slide is-inactive" data-slide-id=1>
        Connect your Calendar
    </div>

    <div class="mm-slider__slide is-inactive" data-slide-id=2>
        Customize your SMS
    </div>

</div>

CSS

.g-grid {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;

}


.g-grid--padded {
  margin: 0 -1em;
  margin: 0 -1rem;
}

.g-grid--jcc {
  justify-content: center;
}

.g-unit {

}

.g-grid--padded .g-unit {
  padding: 0 1em;
  padding: 0 1rem;
}

.g-unit--1 {
  width: 8.3333%;
  flex: 0 0 8.3333%;
}

.g-unit--2 {
  width: 16.6667%;
  flex: 0 0 16.6667%;
}

.g-unit--3 {
  width: 25%;
  flex: 0 0 25%;
}

.g-unit--4 {
  width: 33.3333%;
  flex: 0 0 33.3333%;
}

.g-unit--5 {
  width: 41.6667%;
  flex: 0 0 41.6667%;
}

.g-unit--6 {
  width: 50%;
  flex: 0 0 50%;
}

.g-unit--7 {
  width: 58.3333%;
  flex: 0 0 58.3333%;
}

.g-unit--8 {
  width: 66.6667%;
  flex: 0 0 66.6667%;
}

.g-unit--9 {
  width: 75%;
  flex: 0 0 75%;
}

.g-unit--10 {
  width: 83.3333%;
  flex: 0 0 83.3333%;
}

.g-unit--11 {
  width: 91.6667%;
  flex: 0 0 91.6667%;
}

.g-unit--12 {
  width: 100%;
  flex: 0 0 100%;
}


.mm-slider__nav_btn {
	cursor: pointer;	
}

.mm-slider__slides {
    overflow: hidden;
}

.mm-slider__slide {}

.mm-slider__slide.is-inactive {
    display: none;
}

.mm-slider__slide.is-active {}

.mm-slider__slide.is-leaving--left {
    animation: .3s mm-slider__slideIsLeaving--left;
}

.mm-slider__slide.is-entering--left {
    animation: .3s mm-slider__slideIsEntering--left;
}

.mm-slider__slide.is-leaving--right {
    animation: .3s mm-slider__slideIsLeaving--right;
}

.mm-slider__slide.is-entering--right {
    animation: .3s mm-slider__slideIsEntering--right;
}

@keyframes mm-slider__slideIsEntering--left {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
}

@keyframes mm-slider__slideIsEntering--right {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
}

@keyframes mm-slider__slideIsLeaving--left {
    100% {
        opacity: 0;
        transform:...

JavaScript

var animation_evt_name = (function (){
        var t;
        var el = document.createElement('fakeelement');
        var transitions = {
          'animation':'animationend',
          'OAnimation':'oAnimationEnd',
          'MozAnimation':'animationend',
          'WebkitAnimation':'webkitAnimationEnd'
        }

        for(t in transitions){
            if( el.style[t] !== undefined ){
                return transitions[t];
            }
        }

        return false;
    })();

$.fn.extend({
    oneAnimationEnd: function(callback) {
        return this.one(animation_evt_name, function(e) {
            callback(e);
        });
    },

    onAnimationEnd: function(callback) {
        return this.on(animation_evt_name, function(e) {
            callback(e);
        });
    }
});




var $slides = $('.mm-slider__slide'),
    idx_of_$current_slide = 0,
    $current_slide = $slides.eq(idx_of_$current_slide),
    sliding = false;


function navToSlide(idx_of_$new_slide, cb) {
    if (sliding ||
        idx_of_$new_slide >= $slides.length ||
        idx_of_$current_slide < 0) {
        return;
    }

    var $new_slide = $slides.eq(idx_of_$new_slide),
        slide_anim_direction;


    if (idx_of_$new_slide > idx_of_$current_slide) {
        slide_anim_direction = 'left';
    } else {
        slide_anim_direction = 'right';
    }

    is_leaving_css_class = 'is-leaving--' + slide_anim_direction;
    is_entering_css_class = 'is-entering--' + slide_anim_direction;


    $current_slide
        .addClass(is_leaving_css_class)
        .oneAnimationEnd(function() {
            $current_slide
                .removeClass(is_leaving_css_class)
                .addClass('is-inactive');

            $new_slide
                .removeClass('is-inactive')
                .addClass('is-active')
                .addClass(is_entering_css_class)
                .oneAnimationEnd(function() {
                    $new_slide.removeClass(is_entering_css_class);

                   ...