JSFiddle - React, Tailwind, and code Playground

by Littledoggy12

HTML

<html>
  <head>
    <title>WALL E test</title>
  </head>
  <body>
    <div id = "rightEye" class = "eye"></div>
    <div id = "leftEye" class = "eye"></div>
    <div id = "neck"></div>
    <div id = "box"></div>
    <div id = "rightArm" class = "arm"></div>
    <div id = "leftArm" class = "arm"></div>
    <div id = "rightWheel" class = "wheel"></div>
    <div id = "leftWheel" class = "wheel"></div>
  </body>
</html>

CSS

.eye {
  position: absolute;
  background: black;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: solid gray 1em;
  top: 20%;
}

.arm {
  position: absolute;
  background: #af6c0e;
  width: 2em;
  height: 10em;
  top: 80%;
}

.wheel {
  position: absolute;
  background: black;
  width: 8em;
  height: 5em;
  border-radius: 20%;
  top: 140%;
}

#rightEye {
  left: 37%;
}

#leftEye {
  left: 17%;
}

#rightArm {
  left: 60%;
}

#leftArm {
  left: 11%;
}

#rightWheel {
  left: 40%;
}

#leftWheel {
  left: 15%;
}

#box {
  position: absolute;
  background: orange;
  width: 17em;
  height: 11em;
  top: 80%;
  left: 15%;
}