JSFiddle - React, Tailwind, and code Playground

by Alexey Demin

HTML

<div id="canvas">
  <div id="head">
    <div id="lEye"></div>
    <div id="rEye"></div>
  </div>
  <div id="wings"></div>
  <div id="body">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
  </div>
</div>

CSS

#canvas {
 position: relative;
 width: 200px;    
}
#canvas > div {
 margin: 0 auto;   
}
#head, #body {width: 146px;}
#head {
 background-color: #3a210b;
 height: 73px;
 border-top-left-radius: 73px;
 border-top-right-radius: 73px;
}
#head > div {
 width: 16px;
 height: 16px;
 border-radius: 16px;
 border: 8px solid white;
 float: left;  
}
#lEye, #rEye {margin-top: 25px;}
#lEye {margin-left: 30px; }
#rEye {margin-left: 18px;}

#wings {
 width: 220px;
 height: 76px;
 background-color: #b9e3db;
 border-radius: 38px;
}

#body {
 position: relative;
 height: 116px;
 top: -76px;
 border-bottom-left-radius: 68px 73px;
 border-bottom-right-radius: 68px 73px;
}
#body div {
  height: 19px;
  margin: 0 auto;
}
#body div:nth-child(even) {
 background-color: #3a210b;
}
#body div:nth-child(odd) {
 background-color: #ffde1b;
}
#body div:last-child {
 height: 40px;
 width: 140px;
 border-bottom-left-radius: 70px 40px;
 border-bottom-right-radius: 70px 40px;
}

JavaScript

$(function(){
    window.setInterval(function(){
      $('#wings')
          .animate({
              width: '180px',
              opacity: '0.1'
          }, 100)
          .animate({
              width: '220px',
              opacity: '1'
          }, 100);
    }, 200);
    window.setInterval(function(){
        $('#canvas')
          .animate({
            left: '500px',
            top: '100px'
          }, 2000)
          .animate({
            left: '300px',
            top: '70px'
          }, 2000)
          .animate({
            left: '400px',
            top: '10px'
          }, 2000)
          .animate({
            left: '0px',
            top: '200px'
          }, 2000);
    }, 9000);
});