JSFiddle - React, Tailwind, and code Playground

by TorbenG

HTML

<div id="monster">
  <div class="monsterBody">  
    <div class="eye eyeLeft"> 
    </div>
    <div class="eye eyeRight">    
    </div>
    <div class="mouth">
      )
    </div>
</div>
</div>

CSS

#monster {
    margin-top: 60px;
    height: 93px;
    width: 75px;
    border-radius: 120px;
    background: yellow;
    /* text-align: center; */
    position: relative;
}
    

.eye {
  height: 12px;
  width: 8px;
  background: black;
  border-radius: 10px;
  margin-top: 30px; 
  float: left;
  animation: blinkingEyes 0.15s 1s linear;
}

.eyeLeft {  
  margin-left: 18px;  
}

.eyeRight {
    margin-left: 22px;
}

.mouth {
    font-weight: 900;
    transform-origin: 50% 50%;
    /* display: inline-block; */
    width: 5px;
    margin: 0 auto;
    height: 20px;
    /* text-align: center; */
    /* left: 47%; */
    position: absolute;
    top: 47px;
    transform: rotate(90deg);
    left: 35px;
}

@keyframes blinkingEyes {
  0% {
    transform: rotateX(0deg);    
  }
  36% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(90deg);
  }
}