JSFiddle - React, Tailwind, and code Playground

by MukuMedia

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<html>        
    <body>
        <div class="wrapper">
            <div class="container">
                <div class="page">
                    <div class="page-pic">
                        <div class="space"></div>
                        <div class="page-pic-img-wrapper">
                            <img src="http://ngiley.com/wp-content/uploads/2011/03/Black-Wallpaper.jpg" />
                        </div>
                    </div>
                </div>
                 <div class="page">
                    <div class="page-pic">
                        <div class="space"></div>
                        <div class="page-pic-img-wrapper">
                            <img src="http://2.bp.blogspot.com/-SwHULnneUOw/TnF5_gG9FDI/AAAAAAAAARY/ByTmtCEaaz0/s1600/yellow.png" />
                        </div>
                    </div>
                </div>
                <div class="page">
                    <div class="page-pic">
                        <div class="space"></div>
                        <div class="page-pic-img-wrapper">
                            <img src="http://cdn2.irishviews.com/irishviews-cdn/purple-dark.jpg" />
                        </div>
                    </div>
                </div>
                 <div class="page">
                    <div class="page-pic">
                        <div class="space"></div>
                        <div class="page-pic-img-wrapper">
                            <img src="http://www.candlesandsupplies.net/Brown-Color-Block-image.gif" />
                        </div>
                    </div>
                </div>
                 <div class="page">
                    <div class="page-pic">
                        <div class="space"></div>
                        <div class="page-pic-img-wrapper">
                            <img...

CSS

html, body {
    height: 100%;
    width: 100%;
}

.wrapper {
    height: 100%;
    width: 100%;
}

.container {
    height: 100%;
    margin: 0 auto;
    position: relative;
    width: 100%;
}


.page{
    width:100%; 
    height:100%;
    float:left;
    clear:both;
    margin-bottom:0px;
    display:block;
    overflow:hidden;

}

.page-pic{
    width:100%;
    height:100%;
    float:left;
    position:relative;
}

.space{

    float: left;
    height: 10%;
    position: relative;
    width: 100%;
}

.page-pic-img-wrapper{
    height:80%;
    position:relative;
    width:100%;
    float:left;
    z-index:6;
}

.page-pic img{
    max-height:100%;
    min-height:100%;
    position: absolute;
    top: 0;
    left:0;
    right:0;
    margin:0px auto;
}

JavaScript

(function($) {

var types = ['DOMMouseScroll', 'mousewheel'];

if ($.event.fixHooks) {
    for ( var i=types.length; i; ) {
        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
    }
}

$.event.special.mousewheel = {
    setup: function() {
        if ( this.addEventListener ) {
            for ( var i=types.length; i; ) {
                this.addEventListener( types[--i], handler, false );
            }
        } else {
            this.onmousewheel = handler;
        }
    },
    
    teardown: function() {
        if ( this.removeEventListener ) {
            for ( var i=types.length; i; ) {
                this.removeEventListener( types[--i], handler, false );
            }
        } else {
            this.onmousewheel = null;
        }
    }
};

$.fn.extend({
    mousewheel: function(fn) {
        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
    },
    
    unmousewheel: function(fn) {
        return this.unbind("mousewheel", fn);
    }
});


function handler(event) {
    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
    event = $.event.fix(orgEvent);
    event.type = "mousewheel";
    
    // Old school scrollwheel delta
    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
    
    // New school multidimensional scroll (touchpads) deltas
    deltaY = delta;
    
    // Gecko
    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
        deltaY = 0;
        deltaX = -1*delta;
    }
    
    // Webkit
    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
    
    // Add event and delta to the front of the arguments
    args.unshift(event, delta, deltaX, deltaY);
    
    return ($.event.dispatch ||...