JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://getfirebug.com/firebug-lite.js"></script>
<ul class="slides">
    <li class="active">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere lacinia egestas. In hac habitasse platea dictumst. Nunc congue odio in leo mattis tristique. Nam fermentum orci eu ante congue lobortis. Mauris elit massa, interdum eu consectetur eget, condimentum pellentesque lacus. Ut lacinia, mauris vestibulum ornare tempus, nulla ipsum gravida erat, ac mollis eros metus id dui. Morbi adipiscing hendrerit nisl, ac malesuada nisl adipiscing nec.</li><li>

Etiam nulla enim, convallis nec vestibulum at, lobortis eu velit. In vel mi urna, et fermentum mi. Aenean aliquam dapibus sem, et malesuada enim pharetra auctor. Vivamus purus nibh, vestibulum hendrerit euismod quis, mollis quis nisi. Phasellus imperdiet, magna tempus ornare tincidunt, massa velit fringilla purus, sed venenatis erat arcu in turpis. Aliquam erat volutpat. Phasellus vitae felis neque, et dictum eros. Curabitur vel ipsum eget dui lacinia cursus. Proin sed nibh et ante fermentum faucibus et at nibh. Praesent bibendum, tortor a vehicula dictum, lectus est venenatis sapien, quis sollicitudin nisl enim et massa. Aliquam enim odio, elementum eu porta vitae, blandit bibendum elit. Maecenas tristique tellus et leo pulvinar vestibulum. Nulla facilisi. Donec tincidunt elit id tortor porttitor placerat.</li><li>

Ut id erat sem, gravida interdum tellus. Curabitur suscipit tempor ligula, varius porttitor nisl lacinia vel. Curabitur id tortor ac neque rutrum venenatis. Cras imperdiet feugiat tristique. Cras metus arcu, adipiscing in placerat nec, porttitor a velit. Ut vestibulum ligula non libero ultricies suscipit. Integer ante urna, rutrum non dapibus sed, posuere ut sapien. Mauris sed magna nec augue venenatis rutrum eget et ante. Ut tempor sodales mi et feugiat. Quisque vehicula erat tortor, id pharetra urna. Nunc a ultricies diam. Donec auctor, elit vel egestas pretium, ante elit consequat...

CSS

.slides {
    margin: 30px 0;
    padding: 30px 0;
    position: relative;
}

.nav {
    position: absolute;
    top: 0;
    right: 45%;
}
.nav a {
    display: inline-block;
    cursor: pointer;
}
.nav a.prev {
    margin-right: 10px;
}

.slides li {
    display: none;
}

.slides li.active {
    display: block;
}

JavaScript

(function ($) {
    $.fn.slide = function (direction, duration) {    
        var slides = $(this).children('li');
        var activeIndex = 0;
        // get active slide index
        $(slides).each(function(index) {
            if($(this).hasClass('active')) {
                activeIndex = index;
            }
        });

        $('#console').html(activeIndex);
    };
})(Zepto);

var slides;
$(function () {
    slides = $('.slides');
    $('.next').on('click', function() {
        $(slides).slide('up', 500);
    });
    $('.prev').on('click', function() {
        $(slides).slide('down', 500);
    });
});