JSFiddle - React, Tailwind, and code Playground

by Daniel Hall

HTML

<div id="robot">
<div id="head">
    <div class="eye" id="righteye"></div>
    <div class="eye" id="lefteye"></div>
    <div id="mouth"></div>
    
    </div>
    

<div id="body"><p>
yes!!!!!
</p></div>
<div class="arm" id="rightarm"></div>
<div class="arm" id="leftarm"></div>


</div>
 is right that way!!!!!!

CSS

body {
   font-family: "Comic Sans MS";
}
p {
    font-size: 3em;
}
#head {
     position: absolute;
     left: 35%;
     top: 15%;
     width: 25%;
     height: 25%;
     background-color:  #cacaca;
}
.eye {
    background-color:blue;
    width:25%;
    height:30%;
    border-radius: 50%;
}
#righteye {
  position: absolute;
  left: 20%;
  top: 20%;
}
#lefteye {
  position: absolute;
  left: 60%;
  top: 20%;
}
#mouth {
    position: absolute;
    left: 25%;
    top: 65%;
    width: 50%;
    height: 20%;
    background-color:  #FF0000;
}
#body {
    position: absolute;
    left: 30%;
    top: 40%;
    width: 35%;
    height: 50%;
    background-color:  #cacaca;
    text-align:center;
    padding-top: 30px;
}
.arm {
    position: absolute;
    width:5%;
    height:35%;
    top:40%;
    background-color:  #adadad;
}
#rightarm {
  position: absolute;
  left: 25%;
}
#leftarm {
   position: absolute;
   left: 65%;