JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div id="slideShowContainer">
	
    <div id="slideShow">
    
    	<ul>
        	<li><img src="http://demo.tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/img/photos/1.jpg" width="100%" alt="Fish" /></li>
            <li><img src="http://demo.tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/img/photos/2.jpg" width="100%" alt="Ancient" /></li>
            <li><img src="http://demo.tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/img/photos/3.jpg" width="100%" alt="Industry" /></li>
            <li><img src="http://demo.tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/img/photos/4.jpg" width="100%" alt="Rain" /></li>
        </ul>
    
    </div>
    
    <a id="previousLink" href="#">&raquo;</a>
    <a id="nextLink" href="#">&laquo;</a>
    
</div>

<p class="note"><a href="http://tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/">Read and Download on Tutorialzine</a></p>
<a id="previousLink" href="#">&raquo;</a>
    <a id="nextLink" href="#">&laquo;</a>
<p class="note credit">Photos by: <a href="http://www.flickr.com/photos/ac_theart/3835955225/in/photostream/">Andrea Costa</a> <a href="http://www.flickr.com/photos/spoogman/5010809677/in/photostream/">Bill Owens</a> <a href="http://www.flickr.com/photos/jbgoblin/4160580726/in/photostream/">John Bennett</a> <a href="http://www.flickr.com/photos/ciadefoto/3196303515/in/pool-1115578@N22/">CIA DE FOTO</a></p>

CSS

*{
	margin:0;
	padding:0;
}

html{
	background:url('../img/page_bg_tile.jpg') #202027;
}

body{
	color:#999;
	
	background-image:url('../img/contour.png'),url('../img/page_bg.jpg');
	background-repeat:no-repeat,no-repeat;
	background-position: center 117px, center -200px;

	font:15px Calibri,Arial,sans-serif;
	border:1px solid transparent;
}

/* Styling the slideshow */

#slideShowContainer{
	width:510px;
	height:510px;
	position:relative;
	margin:120px auto 50px;
}

#slideShow{
	position:absolute;
	height:490px;
	width:490px;
	background-color:#fff;
	margin:10px 0 0 10px;
	z-index:100;
	
	-moz-box-shadow:0 0 10px #111;
	-webkit-box-shadow:0 0 10px #111;
	box-shadow:0 0 10px #111;
}

#slideShow ul{
	position:absolute;
	top:15px;
	right:15px;
	bottom:15px;
	left:15px;
	list-style:none;
	overflow:hidden;
}

#slideShow li{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

#slideShowContainer > a{
	border:none;
	text-decoration:none;
	text-indent:-99999px;
	overflow:hidden;
	width:36px;
	height:37px;
	background:url('../img/arrows.png') no-repeat;
	position:absolute;
	top:50%;
	margin-top:-21px;
}

#previousLink{
	left:-38px;
}

#previousLink:hover{
	background-position:bottom left;
}

a#nextLink{
	right:-38px;
	background-position:top right;
}

#nextLink:hover{
	background-position:bottom right;
}

/* General styles */

.note{
	margin-bottom:40px;
	text-align:center;
}

.credit{
	font-size:12px;
}

.credit a{
	color:#bbb !important;
}


a, a:visited {
	text-decoration:underline;
	outline:none;
	color:#97CAE6;
}

a:hover{
	text-decoration:none;
}

JavaScript

$(document).ready(function(){
	
	var slideShow = $('#slideShow'),
		ul = slideShow.find('ul'),
		li = ul.find('li'),
		cnt = li.length;

	// As the images are positioned absolutely, the last image will be shown on top.
	// This is why we force them in the correct order by assigning z-indexes:
	
	updateZindex();

	if($.support.transform){
	
		// Modern browsers with support for css3 transformations
	
		li.find('img').css('rotate',function(i){
			// Rotating the images counterclockwise
			return (-90*i) + 'deg';
		});
	
		// Binding a custom event. the direction and degrees parameters
		// are passed when the event is triggered later on in the code.
	
		slideShow.bind('rotateContainer',function(e,direction,degrees){
			
			// Enlarging the slideshow and photo:
			
			slideShow.animate({
				width		: 510,
				height		: 510,
				marginTop	: 0,
				marginLeft	: 0
			},'fast',function(){
				
				if(direction == 'next'){
				
					// Moving the topmost image containing Li at
					// the bottom after a fadeOut animation
					
					$('li:first').fadeOut('slow',function(){
						$(this).remove().appendTo(ul).show();
						updateZindex();
					});
				}
				else {
					
					// Showing the bottomost Li element on top 
					// with a fade in animation. Notice that we are
					// updating the z-indexes.
					
					var liLast = $('li:last').hide().remove().prependTo(ul);
					updateZindex();
					liLast.fadeIn('slow');
				}
				
				// Rotating the slideShow. css('rotate') gives us the
				// current rotation in radians. We are converting it to
				// degress so we can add 90 or -90 to rotate it to its new value.
				
				slideShow.animate({				
					rotate:Math.round($.rotate.radToDeg(slideShow.css('rotate'))+degrees) + 'deg'
				},'slow').animate({
					width		: 490,
					height		: 490,
					marginTop	: 10,
					marginLeft	: 10
				},'fast');
			});
		});
		
		// By triggering the custom events below, we can 
		// show the previous / next images in the...