JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="wrapper">
  <div class="face"></div>
  <div class="eyes"></div>
  <div class="nose"></div>
  <div class="side-mouth"></div>
</div>

SCSS

body {
  position: relative;
  background-color: #fafafa;
}

.wrapper {
  width: 400px;
  height: 300px;
  margin: 30px auto;
  position: relative;
}

.face {
  position: absolute;
  width: 90%;
  height: 80%;
  border-radius: 50%;
  border-top: 3px solid #333;
  left: calc(50% - 45%);
  top: 15%;
}

.pseudo-face {
  position: absolute;
  width: 15%;
  height: 30%;
  border-radius: 50%;
  border: 2px solid #333;
  border-bottom: none;
  top: -20%;
  content: '';
  background-color: #fafafa;
}

.face:after {
  @extend .pseudo-face;
  left: 15%;
  transform: rotate(-20deg);
}

.face:before {
  @extend .pseudo-face;
  right: 15%;
  transform: rotate(20deg);
}

.eyes {
  width: 100%;
  height: 8%;
  position: absolute;
  top: 50%;
  left: 0;
}

.eyes-pseudo {
  position: absolute;
  width: 4%;
  height: 100%;
  border-radius: 50%;
  background-color: black;
  top: 0;
  content: '';
  transform: rotate(180deg);
  animation: blink 3s linear 3s infinite alternate;
}

.eyes:before {
  @extend .eyes-pseudo;
  right: 30%;
}

.eyes:after {
  @extend .eyes-pseudo;
  left: 35%;
}

.nose {
  position: absolute;
  width: 13%;
  height: 10%;
  border-radius: 90%;
  left: calc(50% - 4%);
  top: 65%;
  background-color: black;
}

.nose-pseudo {
  position: absolute;
  border-radius: 50%;
  border-top: 2px solid black;
  content: '';
}

.nose:after {
  @extend .nose-pseudo;
  width: 70%;
  height: 50%;
  left: calc(50% - 35%);
  top: -55%;
}

.nose:before {
  @extend .nose-pseudo;
  width: 50%;
  height: 30%;
  left: calc(50% - 30%);
  top: 250%;
}

.side-mouth {
  position: absolute;
  width: 13%;
  height: 25%;
  border-radius: 90%;
  left: 60%;
  top: 68%;
  border-right: 1px solid black;
}

@keyframes blink {
  0% {
    height: 0;
  }
  2% {
    height: 100%;
  }
  100% {
    height: 100%;
  }
}