JSFiddle - React, Tailwind, and code Playground

by Aaron Kahlhamer

HTML

<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<div class="cn-nav">
    <a href="#" class="cn-nav-prev">
        <span>Previous</span>
    </a>
    
    <a href="#" class="cn-nav-next">
        <span>Next</span>
    </a>
</div>

CSS

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	box-sizing: border-box; 
    margin:0;
    padding:0;
}
.cn-nav > a{
    position: absolute;
    top: 0px;
    height: 170px;
    width: 170px;
}
.cn-nav-prev{
    left: 0px;
}
.cn-nav-prev span{
    background: #FFCCCC;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    cursor: pointer;
    display: block;
    width: 100px;
    height: 100px;
    text-indent: -9000px;
    opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.cn-nav-next{
    display:none;
    right: 0px;
}
.cn-nav-next span{
    background: #33CC66;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    cursor: pointer;
    display: block;
    width: 100px;
    height: 100px;
    text-indent: -9000px;
    opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.pizza{
    background-color:lightblue!important;
    height: 0!important;
    margin: 0!important;
    opacity: 0.3!important;
    width: 0!important;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
    
}

JavaScript

$('.cn-nav-prev').click(function() {
    $(this).find('span').addClass('pizza');
    $('.cn-nav-next').show();
    $('.cn-nav-next').click(function() {
  $('.cn-nav-prev span').removeClass('pizza');
});
});

$('.cn-nav-next').click(function() {
  $(this).find('span').addClass('pizza');
    $('.cn-nav-prev').click(function() {
  $('.cn-nav-next span').removeClass('pizza');
});
});

var Transformie = {
	
	defaults: {
		inlineCSS: '*',
		stylesheets: true,
		track: '*',
		centerOrigin: 'margin' //false, position
	},
	
	toRadian: function(value) {
		if(value.indexOf("deg") != -1) {
			return parseFloat(value,10) * (Math.PI * 2 / 360);
		} else if (value.indexOf("grad") != -1) {
			return parseFloat(value,10) * (Math.PI/200);
		} else {
			return parseFloat(value,10);
		}
	},
	
	getTransformValue: function(style) {
		return style['-webkit-transform']
		|| 	style['webkit-transform'] 
		|| 	style['transform']
		|| 	style.webkitTransform
		||	style['-moz-transform']
		|| 	style['moz-transform'] 
		|| 	style.MozTransform
		|| 	style.mozTransform;
	},
	
	track: function(query) {
		jQuery(query).unbind('propertychange').bind('propertychange', function(e) {
			if(e.originalEvent.propertyName == 'style.webkitTransform' || e.originalEvent.propertyName == 'style.MozTransform' || e.originalEvent.propertyName == 'style.transform')
				Transformie.applyMatrixToElement(Transformie.computeMatrix(Transformie.getTransformValue(this.style)), this);
		});
	},
	
	apply: function(selector) {
		jQuery(selector).each(function() {
			var foundRule = Transformie.getTransformValue(this.style);
			foundRule && Transformie.applyMatrixToElement(Transformie.computeMatrix(foundRule), this);
		});
	},
	
	parseStylesheets: function() {	
		//Loop through all stylesheets and apply initial rules
		for (var i=0; i < document.styleSheets.length; i++) {
			if(document.styleSheets[i].readOnly) continue; // if the stylesheet gives us security issues and is readOnly, exit here
			for (var j=0; j <...