JSFiddle - React, Tailwind, and code Playground

by Daniel Hall

HTML

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

CSS

body {
    font-famliy: "Comic Sans MS";
}
p {
    font-size: 3.2em;
}
.eye {
    background-color: blue;
    width: 5%;
    height: 10%;
    border-radius: 50%;
}
#righteye {
      position: absolute;
      left: 33%;
      top: 13%;
}
#lefteye {
      position: absolute;
      left: 46%;
      top: 13%;
}
#head {
    position: absolute;
    left: 30%;
    top: 10%;
    background-color: gray;
    border-radius: 15%;
    width: 25%;
    height: 25%;
}
#mouth {
    position: absolute;
    left: 35%;
    top: 30%;
    width: 15%;
    height: 2%;
    background-color: red;
}
body {
   background-color: black;
}
#body