JSFiddle - React, Tailwind, and code Playground

by timshutes

HTML

<div class="carousel" data-transition="slide">
	<div class="slide">
        <img src="http://www.hscripts.com/freeimages/icons/symbols/shapes/square/square-image5.gif" />
		<div class="caption">
			<h1>Slide 1</h1>
			<hr />
			<h5>Subtitle 1</h5>
		</div>
	</div>
	<div class="slide">
        <img src="http://www.hscripts.com/freeimages/icons/symbols/shapes/square/square-image2.gif" />
	    <div class="caption">
		    <h1>Slide 2</h1>
		    <hr />
		    <h5>Subtitle 2</h5>
	    </div>
	</div>
    <div class="slide">
        <img src="http://www.hscripts.com/freeimages/icons/symbols/shapes/square/square-image16.gif" />
	    <div class="caption">
		    <h1>Slide 3</h1>
		    <hr />
		    <h5>Subtitle 3</h5>
	    </div>
    </div>
</div>

CSS

.carousel-slide {
	position: relative;
	overflow: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.carousel-slide .carousel-item {
	position: absolute;
	left: 100%;
	top: 0;
	width: 100%; /* necessary for non-active slides */
	display: block; /* overrides basic carousel styles */
	z-index: 1;
	-webkit-transition: left .2s ease;
	-moz-transition: left .2s ease;
	-ms-transition: left .2s ease;
	-o-transition: left .2s ease;
	transition: left .2s ease;
}
.carousel-no-transition .carousel-item {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}
.carousel-slide .carousel-active {
	left: 0;
	position: relative;
	z-index: 2;
}
.carousel-slide .carousel-in {
	left: 0;
}
.carousel-slide-reverse .carousel-out {
	left: 100%;
}
.carousel-slide .carousel-out,
.carousel-slide-reverse .carousel-in {
	left: -100%;
}
.carousel-slide-reverse .carousel-item {
	-webkit-transition: left .1s ease;
	-moz-transition: left .1s ease;
	-ms-transition: left .1s ease;
	-o-transition: left .1s ease;
	transition: left .1s ease;
}
.carousel-slide-reverse .carousel-active {
	left: 0;
}

JavaScript

/*! Responsive Carousel - v0.1.0 - 2013-07-15
* https://github.com/filamentgroup/responsive-carousel
* Copyright (c) 2013 Filament Group, Inc.; Licensed MIT, GPL */

/*
 * responsive-carousel
 * https://github.com/filamentgroup/responsive-carousel
 *
 * Copyright (c) 2012 Filament Group, Inc.
 * Licensed under the MIT, GPL licenses.
 */

(function($) {

	var pluginName = "carousel",
		initSelector = "." + pluginName,
		transitionAttr = "data-transition",
		transitioningClass = pluginName + "-transitioning",
		itemClass = pluginName + "-item",
		activeClass = pluginName + "-active",
		prevClass = pluginName + "-item-prev",
		nextClass = pluginName + "-item-next",
		inClass = pluginName + "-in",
		outClass = pluginName + "-out",
		navClass =  pluginName + "-nav",
		cssTransitionsSupport = (function(){
			var prefixes = "webkit Moz O Ms".split( " " ),
				supported = false,
				property;

			while( prefixes.length ){
				property = prefixes.shift() + "Transition";

				if ( property in document.documentElement.style !== undefined && property in document.documentElement.style !== false ) {
					supported = true;
					break;
				}
			}
			return supported;
		}()),
		methods = {
			_create: function(){
				$( this )
					.trigger( "beforecreate." + pluginName )
					[ pluginName ]( "_init" )
					[ pluginName ]( "_addNextPrev" )
					.trigger( "create." + pluginName );
			},

			_init: function(){
				var trans = $( this ).attr( transitionAttr );

				if( !trans ){
					cssTransitionsSupport = false;
				}

				$( this )
					.addClass(
						pluginName +
						" " + ( trans ? pluginName + "-" + trans : "" ) + " "
					)
					.children()
					.addClass( itemClass )
					.first()
					.addClass( activeClass );

				$(this)[ pluginName ]( "_addNextPrevClasses" );
			},

			_addNextPrevClasses: function(){
				var $items = $( this ).find( "." + itemClass ),
					$active = $items.filter( "." + activeClass ),
					$next = $active.next( "." + itemClass ),
					$prev =...