JSFiddle - React, Tailwind, and code Playground

by AaronLayton

HTML

<div id="hplogo" border="0">
    <div id="hplogo-g">
        <div id="hplogo-click" onclick="google.doodle.go();"></div>
        <div id="hplogo-lcd-screen" style="background-position: 1000px 1000px; "></div>
        <div id="hplogo-lcd-icon"></div>
        <input id="hplogo-lcd-text" value="" autocomplete="off" onclick="this.focus();this.select()" readonly="readonly">
        <div id="hplogo-on" style="cursor: pointer; background-position: -809px -39px; "></div>
        <div id="hplogo-led" style="cursor: pointer; background-position: 1000px 1000px; "></div>
        <div id="hplogot" style="display: block; opacity: 0; ">Les Paul's 96th Birthday</div>
        <canvas width="474" height="175"></canvas>
    </div>
    <div style="height:0;left:-100px;overflow:hidden;position:absolute;top:-100px;width:0">
        <input id="hplogo-i">
    </div>
    <iframe name="doodle-sound" style="position: absolute; top: -150px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; width: 100px; height: 100px; "></iframe>
</div>

JavaScript

// Guitar Fiddle