JSFiddle - React, Tailwind, and code Playground

by Joshua Dwire

HTML

<base href="http://www.google.com/" />
<div id="hplogo">
    <div id="loupe" style="margin-left: -100px; margin-top: -100px; width: 200px; height: 200px; visibility: visible; left: 746px; top: 162px;" class="">
        <div class="loupe-canvas" id="loupe-canvas-mid">
            <div style="left: -46px; top: -226px;">
                <img src="logos/2011/worldsfair11-hp-1.gif" class="hplogoc"><img src="logos/2011/worldsfair11-hp-2.gif" class="hplogod"><img src="logos/2011/worldsfair11-hp-3.gif" class="hplogof"><img src="logos/2011/worldsfair11-hp-4.gif" class="hplogos"><img src="logos/2011/worldsfair11-hr.jpg" class="hplogoh">
            </div>
        </div>
        <div class="loupe-canvas" id="loupe-canvas-top">
            <div style="left: -74px; top: -207px;">
                <img src="logos/2011/worldsfair11-hp-1.gif" class="hplogoc"><img src="logos/2011/worldsfair11-hp-2.gif" class="hplogod"><img src="logos/2011/worldsfair11-hp-3.gif" class="hplogof"><img src="logos/2011/worldsfair11-hp-4.gif" class="hplogos"><img src="logos/2011/worldsfair11-hr.jpg" class="hplogoh">
            </div>
        </div>
        <div class="loupe-canvas" id="loupe-canvas-bottom">
            <div style="left: -74px; top: -344px;">
                <img src="logos/2011/worldsfair11-hp-1.gif" class="hplogoc"><img src="logos/2011/worldsfair11-hp-2.gif" class="hplogod"><img src="logos/2011/worldsfair11-hp-3.gif" class="hplogof"><img src="logos/2011/worldsfair11-hp-4.gif" class="hplogos"><img src="logos/2011/worldsfair11-hr.jpg" class="hplogoh">
            </div>
        </div><img src="logos/2011/worldsfair11-hp.png" style="height:200px;left:0;position:absolute;top:0;width:200px;z-index:6000">
    </div>
    <div id="hplogot" style="display: block; opacity: 0;">
        160th Anniversary of the First World's Fair
    </div>
</div>
<script>
    (function() {
    var google = {};
    try {
        if (!google.doodle) google.doodle = {};
        var d = ["webkitTransition",...

CSS

#hplogo {
background: url(http://www.google.com/logos/2011/worldsfair11-hp.jpg) top left no-repeat;
cursor: pointer;
height: 168px;
width: 421px
}
#hplogot {
-webkit-box-shadow: 5px 5px 10px #ddd;
-moz-box-shadow: 5px 5px 10px #ddd;
box-shadow: 5px 5px 10px #ddd;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
background-color: #ffffca;
border: 1px solid #b5b5b5;
display: none;
font: normal 10pt arial,sans-serif;
opacity: 0;
padding: 1px 3px;
position: absolute;
white-space: nowrap
}
#loupe {
-webkit-transform: scale(.25) rotateZ(0);
-moz-transform: scale(.25) rotateZ(0);
-webkit-transition-delay: 200ms, 0;
-moz-transition-delay: 200ms, 0;
-webkit-transition: opacity 400ms, -webkit-transform 400ms;
-moz-transition: opacity 400ms, -moz-transform 400ms;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
opacity: 0;
overflow: hidden;
position: absolute;
visibility: hidden;
z-index: 2000
}
#loupe.visible {
-webkit-transform: scale(1) rotateZ(0);
-moz-transform: scale(1) rotateZ(0);
-webkit-transition-delay: 0, 100ms;
-moz-transition-delay: 0, 100ms;
-webkit-transition: opacity 400ms, -webkit-transform 400ms;
-moz-transition: opacity 400ms, -moz-transform 400ms;
cursor: none;
opacity: 1
}
.loupe-canvas {
background: white;
overflow: hidden;
position: absolute;
z-index: 3000
}
.loupe-canvas div {
height: 503px;
left: 0;
position: absolute;
top: 0;
width: 1263px
}
.loupe-canvas img {
position: absolute
}
#loupe-canvas-top {
height: 19px;
left: 51px;
top: 22px;
width: 100px
}
#loupe-canvas-mid {
height: 119px;
left: 23px;
top: 41px;
width: 155px
}
#loupe-canvas-bottom {
height: 18px;
left: 51px;
top: 159px;
width: 100px
}
.hplogoh {
height: 503px;
left: 0;
top: 0;
width: 1263px;
z-index: 4000
}
.hplogoc {
height: 38px;
left: 440px;
top: 273px;
width: 38px;
z-index: 5000
}
.hplogod {
height: 48px;
left: 1108px;
top: 353px;
width: 34px;
z-index:...