JSFiddle - React, Tailwind, and code Playground

by Opick Kusanagi

HTML

<div style="clear: both; text-align: center;">
<div class="ad-emots-wrapper">
<div class="ad-emot ad-emot1">
<div class="mulut">
</div>
</div>
</div>
</div>

CSS

.ad-emots-wrapper {
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -webkit-flex-direction:row;
  -ms-flex-direction:row;
  flex-direction:row;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-justify-content:space-around;
  -ms-flex-pack:distribute;
  justify-content:space-around;
  margin-top:40px;
}

.ad-emot {
  border-radius:50%;
  position:relative;
  width:100px;
  height:100px;
  background-color:#FFEB96;
}

.ad-emot1:after,
.ad-emot1:before {
  position:absolute;
  content:"";
  height:10px;
  width:10px;
  background-color:#414141;
  border-radius:50%;
  top:48px;
  -webkit-animation:ad-emot1-muka-bergerak 5s ease-in-out infinite,ad-emot1-berkedip 2s ease-in-out infinite;
  animation:ad-emot1-muka-bergerak 5s ease-in-out infinite,ad-emot1-berkedip 2s ease-in-out infinite;
  -webkit-animation-direction:alternate;
  animation-direction:alternate;
}

.ad-emot1:after {
  left:30px;
}

.ad-emot1:before {
  left:85px;
}

.ad-emot1 .mulut {
  position:absolute;
  height:3px;
  width:35px;
  background-color:#414141;
  border-radius:5px;
  top:68px;
  left:45px;
  -webkit-animation:ad-emot1-muka-bergerak 5s ease-in-out infinite;
  animation:ad-emot1-muka-bergerak 5s ease-in-out infinite;
  -webkit-animation-direction:alternate;
  animation-direction:alternate;
}

@-webkit-keyframes ad-emot1-berkedip {
  0% {
    height:10px;
  }
  97% {
    height:10px;
  }
  100% {
    height:0;
  }
}

@keyframes ad-emot1-berkedip {
  0% {
    height:10px;
  }
  97% {
    height:10px;
  }
  100% {
    height:0;
  }
}

@-webkit-keyframes ad-emot1-muka-bergerak {
  0% {
    -webkit-transform:translateX(0);
    transform:translateX(0);
  }
  30% {
    -webkit-transform:translateX(0);
    transform:translateX(0);
  }
  35% {
    -webkit-transform:translateX(-20px);
    transform:translateX(-20px);
  }
  65% {
    -webkit-transform:translateX(-20px);
 ...