JSFiddle - React, Tailwind, and code Playground

HTML

<br clear=all id=lgpd>
<div id=lga style="height:171px;padding-top:22px"><noscript>
    <style>
        #verne-chrome {
        background: url(http://dl.dropbox.com/u/17927147/JSFiddle/verne-hp.png) no-repeat;
        left: 100px;
        }
        
        #verne-lever,#verne-dial-depth-big,#verne-dial-depth-small,#verne-dial-position,#verne-dial-position {
        display: none;
        }
    </style>
        </noscript>
        <div id=hplogo onselectstart="return false;"><a hidefocus id="verne-click" href="/search?q=Jules+Verne&ct=verne-hp&oi=ddle"></a>
                <div id="verne-dials-click">
                </div>
                <div id="verne-drag">
                </div>
                <div id="verne-lever">
                </div>
                <div id="verne-chrome">
                </div>
                <div id="verne-layers">
                        <div id="verne-layer-0">
                        </div>
                        <div id="verne-layer-1">
                        </div>
                        <div id="verne-layer-2">
                        </div>
                        <div id="verne-layer-3">
                        </div>
                </div>
                <div id="verne-dial-depth-big">
                </div>
                <div id="verne-dial-depth-small">
                </div>
                <div id="verne-dial-position">
                </div>
                <div id="verne-border">
                </div>
        </div>
</div>

CSS

#hplogo {
    height: 190px;
    margin-top: -5px;
    overflow: hidden;
    position: relative;
    width: 714px;
}

#hplogo, #hplogo * {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#hplogo.drag-active #verne-drag,#hplogo.drag-active #verne-drag * {
    cursor: move !important;
    cursor: none !important;
}

#verne-chrome {
    height: 190px;
    left: 0;
    position: absolute;
    top: 0;
    width: 714px;
    z-index: 400;
}

#verne-chrome-img {
    width: 714px;
    height: 229px;
}

#verne-layers {
    height: 230px;
    left: 0;
    top: -20px;
    overflow: hidden;
    position: absolute;
    width: 714px;
}

#verne-layers img {
    opacity: 0;
}

#verne-layer-0,#verne-layer-1,#verne-layer-2,#verne-layer-3 {
    height: 1388px;
    left: 1px;
    position: absolute;
    top: 1px;
    margin-top: 20px;
    width: 714px;
}

#verne-layer-0 {
    z-index: 300;
}

#verne-layer-1 {
    z-index: 200;
}

#verne-layer-2 {
    z-index: 100;
}

#verne-layer-3 {
    z-index: 50;
    background: white;
}

#verne-lever {
    background: url(http://dl.dropbox.com/u/17927147/JSFiddle/verne-hp.png) no-repeat 0 -190px;
    height: 39px;
    left: 639px;
    position: absolute;
    top: 49px;
    width: 39px;
    z-index: 500;
    transition: transform .1s linear, top .1s linear, left .1s linear;
    -moz-transition: -moz-transform .1s linear, top .1s linear, left .1s linear;
    -webkit-transition: -webkit-transform .1s linear, top .1s linear, left .1s linear;
    -o-transition: -o-transform .1s linear, top .1s linear, left .1s linear;
}

#verne-drag {
    background: url(http://dl.dropbox.com/u/17927147/JSFiddle/verne-hp.png) no-repeat 1000px 1000px;
    cursor: pointer;
    height: 150px;
    left: 565px;
    position: absolute;
    top: 15px;
    width: 150px;
    z-index: 700;
}

#verne-dials-click {
    background: url(http://dl.dropbox.com/u/17927147/JSFiddle/verne-hp.png) no-repeat 1000px 1000px;
    height: 190px;
    left:...

JavaScript

window.google = {
    kEI: "MYNRTY-WNYyo8QOc572bDQ",
    kEXPI: "17259,24999,28324,28386,28600,28641",
    kCSI: {
        e: "17259,24999,28324,28386,28600,28641",
        ei: "MYNRTY-WNYyo8QOc572bDQ",
        expi: "17259,24999,28324,28386,28600,28641"
    },
    ml: function() {},
    pageState: "#",
    kHL: "en",
    time: function() {
        return (new Date).getTime()
    },
    log: function(c, d, b) {
        var a = new Image,
            e = google,
            g = e.lc,
            f = e.li;
        a.onerror = (a.onload = (a.onabort = function() {
            delete g[f]
        }));
        g[f] = a;
        b = b || "/gen_204?atyp=i&ct=" + c + "&cad=" + d + "&zx=" + google.time();
        a.src = b;
        e.li = f + 1
    },
    lc: [],
    li: 0,
    j: {
        en: 1,
        l: function() {
            google.fl = true
        },
        e: function() {
            google.fl = true
        },
        b: location.hash && location.hash != "#",
        bv: 5,
        pl: [],
        mc: 0,
        sc: 0.5,
        u: ""
    },
    Toolbelt: {}
};

if (!window.chrome) window.chrome = {};
window.chrome.sv = 1.00;
window.google.sn = "webhp";
var i = window.google.timers = {};
window.google.startTick = function(a, b) {
    i[a] = {
        t: {
            start: (new Date).getTime()
        },
        bfr: !(!b)
    }
};
window.google.tick = function(a, b, c) {
    if (!i[a]) google.startTick(a);
    i[a].t[b] = c || (new Date).getTime()
};
google.startTick("load", true);
try {
    window.google.pt = window.gtbExternal && window.gtbExternal.pageT();
} catch (v) {}
window.google.jsrt_kill = 1;
var _gjwl = location;

function _gjuc() {
    var b = _gjwl.href.indexOf("#");
    if (b >= 0) {
        var a = _gjwl.href.substring(b + 1);
        if (/(^|&)q=/.test(a) && a.indexOf("#") == -1 && !/(^|&)cad=h($|&)/.test(a)) {
            _gjwl.replace("/search?" + a.replace(/(^|&)fp=[^&]*/g, "") + "&cad=h");
            return 1
        }
    }
    return...