JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="bot-box">
  <div class="johnnie-bot">
    <div class="face"></div>
    <div class="eyebrow left"></div>
    <div class="eyebrow right"></div>
    <div class="antenna"></div>
    <div class="eye left">
      <div class="ball"></div>
      <div class="pupil"></div></div>
    <div class="eye right">
      <div class="ball"></div>
      <div class="pupil"></div>  
    </div>
    <div class="mouth">
      <div class="side left"></div>
      <div class="side right"></div>
    </div>
  </div>
</div>

CSS

.bot-box{
  position: relative;
  width: 200px;
  height: 200px;
  transform: scale(0.4);
}

.johnnie-bot {
    position: absolute;
    width: 100%;
    height: 59%;
    top: 0;
    bottom: 0;
    margin: auto;
}

.eyebrow {
    position: absolute;
    background: #000000;
    width: 34%;
    height: 21%;
    top: 16%;
}

.eyebrow.left {
    left: 0;
}
.eyebrow.right {
    right: 0;
}

.antenna {
    position: absolute;
    width: 3%;
    height: 32%;
    background: #000000;
    left: 0;
    right: 0;
    top: 10%;
    margin: auto;
}

.antenna:before {
    content: '';
    position: absolute;
    width: 200%;
    height: 33%;
    background: #000000;
    border-radius: 50%;
    top: -31%;
    left: -50%;
}

.face {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 87%;
    margin: auto;
    height: 58%;
    background: #8c8e91;
}

.eye {
    position: absolute;
    top: 48%;
    width: 28%;
    height: 46%;
    background: #000000;
    border-radius: 50%;
}
.eye.left{
    left: 3%;
}
.eye.right{
    right: 3%;
}

.ball {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 92%;
    width: 92%;
    background: #fff;
    border-radius: 50%;
}

.pupil {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 56%;
    width: 56%;
    background: #000000;
    border-radius: 50%;
}


.mouth {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 16%;
    width: 25%;
    margin: auto;
}

.mouth .side {
    width: 50%;
    height: 100%;
    position: absolute;
    background: #000000;
}

.mouth .side.left{
  transform: skew(19deg);
  left: 7%;
}

.mouth .side.right{
  transform: skew(-19deg);
  right: 7%;
}


/* ANIMATION TEST */

.bot-box .johnnie-bot * {
  transition: 0.3s ease-in-out;
}

.bot-box:hover .eyebrow.left{
      transform: translateY(30%) rotate(-10deg);
}

.bot-box:hover .eyebrow.right{
     ...