JSFiddle - React, Tailwind, and code Playground

by gregguida

HTML

<div class="mole">
  <div class="snout"></div>
  <div class="nose"></div>
  <div class="eye-border left">
    <div class="eye"></div>
  </div>
  <div class="xeye left">&times;</div>
  <div class="eye-border right">
    <div class="eye"></div>
  </div>
  <div class="xeye right">&times;</div>
  <div class="body"></div>
  <div class="tooth left"></div>
  <div class="tooth right"></div>
  <div class="whisker top left"></div>
  <div class="whisker top  right"></div>
  <div class="whisker middle  left"></div>
  <div class="whisker middle  right"></div>
  <div class="whisker bottom  left"></div>
  <div class="whisker bottom  right"></div>
</div>

CSS

.mole {
display: inline-block;
position: relative;
vertical-align: top;
width: 300px;
height: 400px;
margin: 10px auto 0;
overflow: hidden;
background: #58381d;
border-radius: 150px 150px 0 0;
/*-webkit-transform: scale(.25,.25);*/
}

.mole * {
  position: absolute;
}

.mole .snout {
z-index: 8;
width: 0;
height: 0;
bottom: 175px;
right:0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 200px solid #3a210a;
}

.mole .nose {
  top: 25px;
  right: 120px;
  z-index: 9;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 40px solid #000;
}

.mole .body {
  width: 19.5em;
  height: 175px;
  background: #3a210a;
  bottom: 0;
  right:0;
}

.mole .eye-border.left {
left: 30px;
}

.mole .eye-border.right {
left: 170px;
}

.mole .eye-border {
z-index: 7;
width: 100px;
height: 100px;
background: #796048;
top: 70px;
-moz-border-radius: 5em;
-webkit-border-radius: 5em;
-o-border-radius: 5em;
-ms-border-radius: 5em;
-khtml-border-radius: 5em;
border-radius: 5em;
}

.mole .xeye {
  display: none;
  z-index: 7;
  width: 50px;
  height: 50px;
  -webkit-text-stroke: 5px #796048;
  color: #000;
  top: 70px;
  font-size:125px;
  line-height:25px;
  font-weight:bold;
}

.mole .xeye.left {
  left:30px;
}

.mole .xeye.right {
  right:50px;
}

.mole .eye-border .eye {
z-index: 6;
width: 30px;
height: 30px;
margin: 10px;
left: 0;
background: black;
border: 25px solid #fdfdf2;
border-radius: 50px;
}

.tooth {
  z-index:10;
  height:40px;
  width:20px;
  top:150px;
  background: #fdfdf2;
}

.tooth.left {
  left:125px;
}

.tooth.right {
  right:125px;
}

.whisker {
  z-index:10;
  height:20px;
  width:20px;
  top:150px;
  border-radius:20px;
  background: #000;
}

.whisker.top {
  top:110px;
}

.whisker.top.left {
  left:100px;
}

.whisker.top.right {
  right:100px;
}

.whisker.middle {
  top:130px;
}

.whisker.middle.left {
  left:83px;
}

.whisker.middle.right {
  right:83px;
}

.whisker.bottom {
 ...