JSFiddle - React, Tailwind, and code Playground

by ASHISH ROX

HTML

<div class="container">
			<header class="clearfix">
				<span>Blueprint</span>
				<h1>Quotes Rotator</h1>
				<nav>
					<a href="http://tympanus.net/Blueprints/NestedAccordion" class="icon-arrow-left" data-info="previous Blueprint">Previous Blueprint</a>
					<a href="http://tympanus.net/codrops/?p=14591" class="icon-drop" data-info="back to the Codrops article">back to the Codrops article</a>
				</nav>
			</header>	
			<div class="main">
				<div id="cbp-qtrotator" class="cbp-qtrotator">
					<div class="cbp-qtcontent">
						<img src="images/1.jpg" alt="img01" />
						<blockquote>
						  <p>People eat meat and think they will become as strong as an ox, forgetting that the ox eats grass.</p>
						  <footer>Pino Caruso</footer>
						</blockquote>
					</div>
					<div class="cbp-qtcontent">
						<img src="images/2.jpg" alt="img02" />
						<blockquote>
						  <p>Nothing will benefit human health and increase the chances for survival of life on Earth as much as the evolution to a vegetarian diet.</p>
						  <footer>Albert Einstein</footer>
						</blockquote>
					</div>
					<div class="cbp-qtcontent">
						<img src="images/3.jpg" alt="img03" />
						<blockquote>
						  <p>If you don't want to be beaten, imprisoned, mutilated, killed or tortured then you shouldn't condone such behaviour towards anyone, be they human or not.</p>
						  <footer>Moby</footer>
						</blockquote>
					</div>
					<div class="cbp-qtcontent">
						<img src="images/4.jpg" alt="img04" />
						<blockquote>
						  <p>My body will not be a tomb for other creatures.</p>
						  <footer>Leonardo Da Vinci</footer>
						</blockquote>
					</div>
				</div>
			</div>
		</div>

CSS

.cbp-qtrotator {
	position: relative;
	margin: 3em auto 5em auto;
	max-width: 800px;
	width: 100%;
	min-height: 400px;
}

.cbp-qtrotator .cbp-qtcontent {
	position: absolute;
	min-height: 200px;
	border-top: 1px solid #f4f4f4;
	border-bottom: 1px solid #f4f4f4;
	padding: 2em 0;
	top: 0;
	z-index: 0;
	opacity: 0;
	width: 100%;
}

.no-js .cbp-qtrotator .cbp-qtcontent {
	border-bottom: none;
}

.cbp-qtrotator .cbp-qtcontent.cbp-qtcurrent,
.no-js .cbp-qtrotator .cbp-qtcontent {
	position: relative; 
	z-index: 100;
	pointer-events: auto;
	opacity: 1;
}

.cbp-qtrotator .cbp-qtcontent:before,
.cbp-qtrotator .cbp-qtcontent:after {
	content: " ";
	display: table;
}

.cbp-qtrotator .cbp-qtcontent:after {
	clear: both;
}

.cbp-qtprogress {
	position: absolute;
	background: #47a3da;
	height: 1px;
	width: 0%;
	top: 0;
	z-index: 1000;
}

.cbp-qtrotator blockquote {
	margin: 0;
	padding: 0;
}

.cbp-qtrotator blockquote p {
	font-size: 2em;
	color: #888;
	font-weight: 300;
	margin: 0.4em 0 1em;
}

.cbp-qtrotator blockquote footer {
	font-size: 1.2em;
}

.cbp-qtrotator blockquote footer:before {
	content: '― ';
}

.cbp-qtrotator .cbp-qtcontent img {
	float: right;
	margin-left: 3em;
}

/* Example for media query */
@media screen and (max-width: 30.6em) { 

	.cbp-qtrotator {
		font-size: 70%;
	}

	.cbp-qtrotator img {
		width: 80px;
	}

}
/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
	font-family: 'fontawesome';
	src:url('../fonts/fontawesome.eot');
	src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
		url('../fonts/fontawesome.svg#fontawesome') format('svg'),
		url('../fonts/fontawesome.woff') format('woff'),
		url('../fonts/fontawesome.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

body, html { font-size: 100%; 	padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Clearfix...

JavaScript

/**
 * jquery.cbpQTRotator.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
;( function( $, window, undefined ) {

	'use strict';

	// global
	var Modernizr = window.Modernizr;

	$.CBPQTRotator = function( options, element ) {
		this.$el = $( element );
		this._init( options );
	};

	// the options
	$.CBPQTRotator.defaults = {
		// default transition speed (ms)
		speed : 700,
		// default transition easing
		easing : 'ease',
		// rotator interval (ms)
		interval : 8000
	};

	$.CBPQTRotator.prototype = {
		_init : function( options ) {

			// options
			this.options = $.extend( true, {}, $.CBPQTRotator.defaults, options );
			// cache some elements and initialize some variables
			this._config();
			// show current item
			this.$items.eq( this.current ).addClass( 'cbp-qtcurrent' );
			// set the transition to the items
			if( this.support ) {
				this._setTransition();
			}
			// start rotating the items
			this._startRotator();

		},
		_config : function() {

			// the content items
			this.$items = this.$el.children( 'div.cbp-qtcontent' );
			// total items
			this.itemsCount = this.$items.length;
			// current item's index
			this.current = 0;
			// support for CSS Transitions
			this.support = Modernizr.csstransitions;
			// add the progress bar
			if( this.support ) {
				this.$progress = $( '<span class="cbp-qtprogress"></span>' ).appendTo( this.$el );
			}

		},
		_setTransition : function() {
			setTimeout( $.proxy( function() {
				this.$items.css( 'transition', 'opacity ' + this.options.speed + 'ms ' + this.options.easing );
			}, this ), 25 );
		},
		_startRotator: function() {

			if( this.support ) {
				this._startProgress();
			}

			setTimeout( $.proxy( function() {
				if( this.support ) {
					this._resetProgress();
				}
				this._next();
				this._startRotator();
			}, this ), this.options.interval...