JSFiddle - React, Tailwind, and code Playground

by jessikwa

HTML

<div class="genericError_Graphic">
    <div class="graphic_wrap">
        <div class="squiggles">
            <div class="squiggle-1"></div>
            <div class="squiggle-2"></div>
            <div class="squiggle-3"></div>
            <div class="squiggle-4"></div>
            <div class="squiggle-5"></div>
            <div class="squiggle-6"></div>
        </div>
        <div class="outerScreen">
            <div class="innerScreen">
                <div class="face">
                    <div class="eye lefteye"></div>
                    <div class="eye righteye"></div> 
                    <div class="mouth"></div>
                    <div class="tongue"></div>
                </div>
            </div>
            <div class="button"></div>
        </div>
    </div>
 </div>
<div class="genericError_Graphic">
    <div class="graphic_wrap">
        <div class="outerScreen">
            <div class="innerScreen">
                <div id="camsUpdatingGraphic1" class="wrench">
                    <div class="top"></div>
                    <div class="gap"></div>
                    <div class="handle"></div>
                    <div class="roundbottom"></div>
                    <div class="innerroundbottom"></div>
                </div>
                <div id="camsUpdatingGraphic2" class="termface" style="display:none;">
                    <div class="glasses">
                        <div class="g-top"></div>
                        <div class="g-left glass"></div>
                        <div class="g-right glass"></div>
                        <div class="redeye"></div>
                    </div>
                    <div class="mouthline leftline"></div>
                    <div class="mouth"></div>
                    <div class="mouthline rightline"></div>
                </div>
            </div>
            <div class="button"></div>
        </div>
    </div>
</div>

CSS

.genericError_Graphic {
  display: inline-block;
  margin: 20px auto;
  text-align: center;
  vertical-align: top;
  font-size: .75em;
  width: 40%; }
  @media screen and (max-width: 992px) {
    .genericError_Graphic {
      font-size: .6em; } }
  @media screen and (max-width: 767px) {
    .genericError_Graphic {
      font-size: .6em;
      display: block;
      width: 100%; } }

.graphic_wrap {
  display: inline-block;
  position: relative; }

.squiggles {
  height: 3em; }
  .squiggles div {
    width: .1em;
    height: .1em;
    color: #f1a043;
    font-size: 4.5em;
    display: inline-block;
    position: absolute;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg); }
    .squiggles div:after {
      content: "~"; }
  .squiggles .squiggle-1 {
    left: 1em; }
  .squiggles .squiggle-2 {
    left: 2em; }
  .squiggles .squiggle-3 {
    left: 3em; }
  .squiggles .squiggle-4 {
    left: 4em; }
  .squiggles .squiggle-5 {
    left: 5em; }
  .squiggles .squiggle-6 {
    left: 6em; }

.outerScreen {
  padding: 1.3em 1.3em 4em 1.3em;
  -webkit-box-shadow: 0px 0px 6px #d1d1d1;
  -moz-box-shadow: 0px 0px 6px #d1d1d1;
  -ms-box-shadow: 0px 0px 6px #d1d1d1;
  -o-box-shadow: 0px 0px 6px #d1d1d1;
  box-shadow: 0px 0px 6px #d1d1d1;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #f1a043;
  background: -moz-linear-gradient(-45deg, #ef942b 0%, #f1a043 50%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, right bottom, left top, color-stop(0%, #ef942b), color-stop(50%, #f1a043));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #ef942b 0%, #f1a043 50%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #ef942b 0%, #f1a043 50%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #ef942b 0%, #f1a043 50%);
  /* IE10+ */
  background: linear-gradient(-45deg,...

JavaScript

var easterEgg = "hastalavista";
var eggLength = easterEgg.length;
var keyHistory = "";
var match;
document.onkeypress = function (e) {
    keyHistory += String.fromCharCode(e.which);
    match = keyHistory.match(easterEgg);
    if (match) {
        document.getElementById("camsUpdatingGraphic1").style.display = "none";
        document.getElementById("camsUpdatingGraphic2").style.display = "block";
        keyHistory = match = "";
    } else if (keyHistory.length > 30) {
        keyHistory = keyHistory.substr((keyHistory.length - eggLength - 1));
    }
}