JSFiddle - React, Tailwind, and code Playground

by Graham Fairweather

HTML

<div id="wrapper">
    <div id="background">
        <div id="logo"></div>
        <div id="main">
            <img id="mainphoto"></img>
            <div id="black">
                <div id="paras">
                    <div id="para1"></div>
                    <div id="para2"></div>
                    <div id="para3"></div>
                    <div id="para4"></div>
                </div>
                <div id="bookNow"></div>
            </div>
        </div>
        <div id="nav">
            <div id="leftnav"></div>
            <div id="rightnav"></div>
            <div id="previousWrap">
                <img id="previous"></img>
            </div>
            <div id="currentWrap">
                <img id="current"></img>
            </div>
            <div id="nextWrap">
                <img id="next"></img>
            </div>
        </div>
    </div>
</div>

CSS

#wrapper {
    width:320px;
    height:480px;
}
#background {
    background-color:#e8e8de;
    position:relative;
    width:100%;
    height:100%
}
#logo, #main, #mainphoto, #black, #nav, #previous, #current, #next {
    width:100%;
}
#logo {
    background: url(http://www.kamiblue.com/hotelstest/images/logo.png) no-repeat;
    height:49px;
}
#main {
    height:320px;
}
#mainphoto {
    height:100%;
    display:block;
}
#black {
    position:absolute;
    height:120px;
    -webkit-border-radius:13px 13px 13px 13px;
    -moz-border-radius:13px 13px 13px 13px;
    border-radius:13px 13px 13px 13px;
    background-color:#333333;
    bottom:80px;
}
#paras {
    position:relative;
    left:10px;
    font-family:Arial;
    font-weight:bold;
    font-size:1.3em;
    color:#FFFFFF;
}
#para1, #para4 {
    font-size:1.5em;
}
#para3 {
    color:#000000;
    text-decoration:line-through;
}
#para4 {
    color:#EE2E33;
}
#bookNow {
    position:absolute;
    background: url(http://www.kamiblue.com/hotelstest/images/cta.png) no-repeat;
    width:170px;
    height:56px;
    bottom:5px;
    right:2px;
}
#bookNow:hover {
    cursor:pointer;
}
#previousWrap, #currentWrap, #nextWrap {
    width:33.3%;
    float:left;
}
#previous, #current, #next {
    height:110px;
}
#leftnav {
    position:absolute;
    background: url(http://www.kamiblue.com/hotelstest/images/goleft2.png) no-repeat;
    left:0px;
    bottom:0px;
    width:44px;
    height:44px;
}
#leftnav:hover {
    cursor:pointer;
}
#rightnav {
    position:absolute;
    background: url(http://www.kamiblue.com/hotelstest/images/goright2.png) no-repeat;
    right:0px;
    bottom:0px;
    width:44px;
    height:44px;
}
#rightnav:hover {
    cursor:pointer;
}

JavaScript

function RingArray(object, position) {
    this.array = RingArray.compact(object);
    this.setPosition(position);
}

RingArray.toInt32 = function (number) {
    return number >> 0;
};

RingArray.toUint32 = function (number) {
    return number >>> 0;
};

RingArray.isOdd = function (number) {
    return number % 2 === 1;
};

RingArray.indexWrap = function (index, length) {
    index = RingArray.toInt32(index);
    length = RingArray.toUint32(length);
    if (index < 0 && RingArray.isOdd(length)) {
        index -= 1;
    }

    return RingArray.toUint32(index) % length;
};

RingArray.compact = (function (filter) {
    var compact;

    if (typeof filter === 'function') {
        compact = function (object) {
            return filter.call(object, function (element) {
                return element;
            });
        };
    } else {
        compact = function (object) {
            object = Object(object);
            var array = [],
                length = RingArray.toUint32(object.length),
                index;

            for (index = 0; index < length; index += 1) {
                if (index in object) {
                    array.push(object[index]);
                }
            }

            return array;
        };
    }

    return compact;
}(Array.prototype.filter));

RingArray.prototype = {
    setPosition: function (position) {
        this.position = RingArray.indexWrap(position, this.array.length);

        return this;
    },

    setToStart: function () {
        return this.setPosition(0);
    },

    setToEnd: function () {
        return this.setPosition(this.array.length - 1);
    },

    setRandom: function () {
        return this.setPosition(Math.floor(Math.random() * this.array.length));
    },

    increment: function (amount) {
        return this.setPosition(this.position + (RingArray.toInt32(amount) || 1));
    },

    previousElement: function () {
        return this.array[RingArray.indexWrap(this.position - 1,...