JSFiddle - React, Tailwind, and code Playground

by hinablue

HTML

<div id="container">
        <div>
            <div id="album" class="album">
                <div class="paging">
                    <div class="page single p1">
                        <h1>Test</h1>
                    </div>
                    <div class="page single p2">
                        <a href="http://www.google.com.tw" id="testlink2" target="_blank">Test Link</a>
                        <input type="button" id="button1" value="Test Button 1 with INPUT Tag" />
                        <button id="button2">Test Button 2 with BUTTON Tag</button>
                    </div>
                    <div class="page single p3">
                        <a href="http://www.google.com.tw" id="testlink3" target="_blank">Test Link</a>
                    </div>
                    <div class="page single p4"></div>
                    <div class="page single p5"></div>
                    <div class="page single p6"></div>
                    <div class="page single p7"></div>
                    <div class="page single p8"></div>
                    <div class="page single p9"></div>
                </div>
            </div>
        </div>
    </div>

CSS

body {
    font-size: sans-serif;
    counter-reset: sections;
    background-color: #333;
    color: #fff;
}

h2:before {
    content: "Section " counter(sections) ". ";
    counter-increment: sections;
}

#container {
    width: 100%;
    margin: 0 auto;
}

blockquote {
    font-size: 1.5em;
    font-weight: bold;
}

blockquote a {
    color: #ffffff;
    text-decoration: none;
}

pre {
    font-size: 0.92em;
}

.button {
    text-align: center;
    margin: 0 auto;
}
button {
    cursor: pointer;
    font-size: 1.2em;
}

#album, .album {
    position: relative;
    width: 90%;
    height: 450px;
    overflow: hidden;
    margin: 0 auto;
    border: 2px solid #ffffff;
    background-color: #000000;
}

#paging, .paging {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 450px;
    height: 450px;
}

#paging div.page, .paging div {
    float: left;
    width: 440px;
    height: 440px;
    margin: 4px;
    border: 1px solid #666666;
    background-color: #efefef;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    color: #000000;
    text-align: center;
    font-size: 0.85em;
    display: none;
    cursor: pointer;
}

.banner_pager {
    list-style: none;
    width: 400px;
    display: block;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}
.banner_pager > li {
    display: inline;
    cursor: pointer;
    padding: 0px 4px;
    font-size: 3em;
    color: black;
}
.banner_pager > li.on {
    color: white;
}

.paging div.p1, .paging div.p3, .paging div.p5, .paging div.p7, .paging div.p9
{ width: 500px; height: 500px; }

JavaScript

/*
// iphoneSlide - jQuery plugin
// @version: 0.8 (2012/03/03)
// @requires jQuery v1.4.3+
// @author Hina, Cain Chen. hinablue [at] gmail [dot] com
// @modified by: Adam Chow [email protected]
// Examples and documentation at: http://jquery.hinablue.me/jqiphoneslide
//
// Dual licensed under the MIT and GPL licenses:
// http://www.opensource.org/licenses/mit-license.php
// http://www.gnu.org/licenses/gpl.html
*/

(function() {
  var $, iphoneslide;

  $ = jQuery;

  iphoneslide = (function() {
    "use strict";
    var defaults, m;

    function iphoneslide(options, callback, workspace) {
      this.workspace = $(workspace);
      this._create(options, callback);
    }

    m = Math;

    defaults = {
      handler: null,
      pageHandler: null,
      slideHandler: null,
      direction: 'horizontal',
      maxShiftPage: 5,
      responsive: false,
      draglaunch: 0.5,
      friction: 0.325,
      sensitivity: 20,
      extrashift: 800,
      touchduring: 800,
      easing: 'swing',
      bounce: true,
      pageshowfilter: false,
      autoPlay: false,
      cancelAutoPlayOnResize: true,
      autoCreatePager: false,
      pager: {
        pagerType: 'dot',
        selectorName: '.banner_pager',
        childrenOnClass: 'on',
        slideToAnimated: true
      },
      autoPlayTime: 3000,
      onShiftComplete: null
    };

    iphoneslide.prototype.workspace = null;

    iphoneslide.prototype.handler = null;

    iphoneslide.prototype.pagesHandler = null;

    iphoneslide.prototype.totalPages = 0;

    iphoneslide.prototype.matrixRow = 0;

    iphoneslide.prototype.matrixColumn = 0;

    iphoneslide.prototype.pagesOuterWidth = 0;

    iphoneslide.prototype.pagesOuterHeight = 0;

    iphoneslide.prototype.maxWidthPage = 0;

    iphoneslide.prototype.maxHeightPage = 0;

    iphoneslide.prototype.nowPage = 1;

    iphoneslide.prototype.initiPhoneSlide = false;

    iphoneslide.prototype.autoPlayerTimer = null;

    iphoneslide.prototype.isTouch =...