JSFiddle - React, Tailwind, and code Playground

by jessikwa

HTML

<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>
      <div class="button"></div>
    </div>
  </div>
</div>
<br><br><br><br>
<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="x-eye x-eyeLeft"></div>
          <div class="x-eye x-eyeRight"></div> 
          <div class="line-mouth"></div>
          <div class="tongue"></div>
        </div>
      </div>
      <div class="button"></div>
    </div>
  </div>
</div>

SCSS

.genericError_Graphic {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  font-size: .75em; }
  @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, #ef942b 0%, #f1a043 50%);
  /* W3C...