JSFiddle - React, Tailwind, and code Playground

by Reigel Gallarde

HTML

<img src="http://i141.photobucket.com/albums/r73/mohanvincy/bisagunsa/martha.png"
/>
<div id="total">1</div>
<div id="counter">1</div>
<div>
    <a href="#" class="prev">prev</a>
    <a href="#" class="next">next</a>
    <a href="#" class="play">pause</a>
</div>
<div id="container">
    <div class="g1"></div>
    <div class="o"></div>
    <div class="g2"></div>
    <div class="l"></div>
    <div class="e"></div>
</div>

CSS

#container {
    position: relative;
    width: 394px;
    height: 154px;
    border: 1px solid red;
    background: url(h/ttp://i141.photobucket.com/albums/r73/mohanvincy/bisagunsa/martha.png);
}
#counter {
    text-align: right;
}
#container div  {
    background: url(http://i141.photobucket.com/albums/r73/mohanvincy/bisagunsa/graham11-hp-sprite.png) 0 0 no-repeat;
}
#container div.e {
    position: absolute;
    width: 93px;
    height: 89px;
    top: 44px;
    right: 8px;
}

JavaScript

var google = {
    g1: $('#container div.g1'),
    o: $('#container div.o'),
    g2: $('#container div.g2'),
    l: $('#container div.l'),
    e: $('#container div.e')
};
var position = {
    e: [{
        d: {
            height: '89px',
            width: '93px',
            top: '44px'
        },
        p: '0 0'},
    {
        d: {
            height: '89px',
            width: '93px',
            top: '44px'
        },
        p: '-88px 0'},
    {
        d: {
            height: '89px',
            width: '93px',
            top: '44px'
        },
        p: '-177px 0'},
    {
        d: {
            height: '89px',
            width: '93px',
            top: '44px'
        },
        p: '-269px 1px'},
    {
        d: {
            height: '89px',
            width: '93px',
            top: '44px'
        },
        p: '-363px 2px'},
    {
        d: {
            height: '89px',
            width: '93px',
            top: '44px'
        },
        p: '-456px 2px'},
    {
        d: {
            height: '89px',
            width: '93px',
            top: '44px'
        },
        p: '-548px 4px'},
    {
        d: {
            height: '89px',
            width: '93px',
            top: '44px'
        },
        p: '-640px 5px'},
    {
        d: {
            height: '89px',
            width: '93px',
            top: '44px'
        },
        p: '-733px 6px'},
    {
        d: {
            height: '89px',
            width: '93px',
            top: '44px'
        },
        p: '-827px 6px'},
    {
        d: {
            height: '89px',
            width: '93px',
            top: '44px'
        },
        p: '-919px 6px'},
    {
        d: {
            height: '89px',
            width: '93px',
            top: '44px'
        },
        p: '-1011px 6px'},
    {
        d: {
            height: '89px',
            width: '93px',
            top: '44px'
        },
        p: '-1102px 6px'},
    {
        d: {
            height: '89px',
           ...