JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="compy">
 <div class="face">
 

  <div class="eyes">
    <div class="eye"></div>
    <div class="eye"></div>
  </div>
  <div class="mouth">
    <svg width="91" height="24" fill="none">
      <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" d="M5 5c1.13 2.029 16.136 14 41.79 14C67.316 19 81.483 9.667 86 5" /></svg>
  </div>
   </div>
</div>

CSS

body,
html {
  background: #474E48;
  padding: 0;
  margin: 0;
}

.compy {
  border: 1px solid red;
  width: 320px;
  height: 240px;
  overflow: hidden;
}

.face {
  position: relative;
  top: 0;
  animation: look 3s infinite;
}

.eyes {
  margin: 0 auto;
  width: 190px;
  display: flex;
  justify-content: space-between;
  position: relative;
  top: 50px;
  }

.eye {
  display: inline-block;
  width: 75px;
  height: 75px;
  background: radial-gradient(black 40%, #090909 40%, #000);
  border-radius: 50%;
  position: relative;
  animation: blink 2s infinite;
}

.eye::before {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background: linear-gradient(-45deg, transparent, #ffffff7d);
  border-radius: 50%;
  position: absolute;
  left: 10px;
  top: 10px;
}

.eye::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  left: 12px;
  top: 12px;
}

.mouth {
  position: relative;
  top: 70px;
  display: inline-block;
  width: 100%;
  text-align: center;
}

@keyframes blink {
  0% {transform: scaleY(1)}
  2% {transform: scaleY(0)}
  5% {transform: scaleY(1)}
}

@keyframes look {
  20%{padding-left: 0px}
  30% {padding-left: 50px; top: 60px;}
  30% {padding-left: 50px; top: 60px;}
  60% {padding-left: 50px; top: 60px;}
  100%{padding-left: 0px}
}