JSFiddle - React, Tailwind, and code Playground

by esteewhy

HTML

<div id="hplogo" dir="ltr" tabindex="0"></div>

CSS

#hplogo{
  background:url('http://google.com/logos/2012/slalom_canoe12-hp.png') no-repeat;
  display:inline-block;
  outline:none;
  overflow:hidden;
  position:relative;
  text-align:left;
  text-decoration:none;
  -moz-user-select:-moz-none;
  -ms-user-select:none;
  -webkit-user-select:none
}
#hplogo,#hplogo_sc,#hplogo_pc{height:207px;width:530px}
#hplogo_sc,#hplogo_pc{position:absolute}
#hplogo_pb,#hplogo_pr,#hplogo_sb,#hplogo_sr,#hplogo_ss,#hplogo_sg,#hplogo_sm{
  background:url('http://google.com/logos/2012/olympics12-hp-sprite.png') no-repeat
}
#hplogo_sc{
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4fwYAAs0BzFaJyDQAAAAASUVORK5CYII=);
  cursor:default;
  text-align:center
}
#hplogo_sb,#hplogo_sle{font:28px 'Fredoka One',arial,sans}
.hplogo_sse{cursor:text;-moz-user-select:text;-ms-user-select:text;-webkit-user-select:text}
#hplogo_sb{background-position:-193px -152px;color:#fbfbfb;height:60px;padding-top:5px;text-shadow:0 -2px 0 rgba(0,0,0,0.4);width:425px}
#hplogo_sbt{margin-right:8px}
#hplogo_pb,#hplogo_pr{display:inline-block;height:73px;width:67px}
#hplogo_sr,#hplogo_ss,#hplogo_sg{cursor:pointer;display:inline-block;height:64px;margin:8px 12px 8px 8px;vertical-align:top;width:50px}
#hplogo_pr{background-position:-193px 0}
#hplogo_pc:hover #hplogo_pr{background-position:-387px -76px}
#hplogo_pc #hplogo_pr.hplogo_prd0{background-position:-193px -76px}
#hplogo_pc #hplogo_pr.hplogo_prd1{background-position:-457px -76px}
#hplogo_pc #hplogo_pr.hplogo_prd2{background-position:-316px 0}
#hplogo_pb{background-position:0 0}
#hplogo_pc:hover #hplogo_pb{background-position:-527px -76px}
#hplogo_pc #hplogo_pb.hplogo_pbd0{background-position:-123px 0}
#hplogo_pc #hplogo_pb.hplogo_pbd1{background-position:-439px 0}
#hplogo_pc #hplogo_pb.hplogo_pbd2{background-position:-317px -76px}
#hplogo_sg{background-position:-85px -76px}
#hplogo_sg:hover{background-position:-138px...

JavaScript

window.google||(window.google={});
(function() {
    var h = void 0,
        j = !0,
        k = null,
        l = !1,
        n, o = this,
        aa = function(a, b) {
            var c = a.split("."),
                d = o;
            !(c[0] in d) && d.execScript && d.execScript("var " + c[0]);
            for (var e;
            c.length && (e = c.shift());)!c.length && b !== h ? d[e] = b : d = d[e] ? d[e] : d[e] = {}
        },
        ba = function(a) {
            var b = typeof a;
            if ("object" == b) if (a) {
                if (a instanceof Array) return "array";
                if (a instanceof Object) return b;
                var c = Object.prototype.toString.call(a);
                if ("[object Window]" == c) return "object";
                if ("[object Array]" == c || "number" == typeof a.length && "undefined" != typeof a.splice && "undefined" != typeof a.propertyIsEnumerable && !a.propertyIsEnumerable("splice")) return "array";
                if ("[object Function]" == c || "undefined" != typeof a.call && "undefined" != typeof a.propertyIsEnumerable && !a.propertyIsEnumerable("call")) return "function"
            }
            else return "null";
            else if ("function" == b && "undefined" == typeof a.call) return "object";
            return b
        },
        ca = "closure_uid_" + Math.floor(2147483648 * Math.random()).toString(36),
        da = 0,
        ea = function(a, b, c) {
            return a.call.apply(a.bind, arguments)
        },
        fa = function(a, b, c) {
            if (!a) throw Error();
            if (2 < arguments.length) {
                var d =
                Array.prototype.slice.call(arguments, 2);
                return function() {
                    var c = Array.prototype.slice.call(arguments);
                    Array.prototype.unshift.apply(c, d);
                    return a.apply(b, c)
                }
            }
            return function() {
                return a.apply(b,...