JSFiddle - React, Tailwind, and code Playground

by Opick Kusanagi

HTML

<center>
<div id="burung-terbang">
<div id="air">
<div class="bird right" style="top: 5px; left: 112px;">
<div class="body1">
</div>
<div class="body2">
</div>
<div class="body3">
</div>
<div class="body4">
</div>
<div class="body5">
</div>

<div class="wing">
<div class="wing1">
</div>
<div class="wing2">
</div>
<div class="wing3crop">
<div class="wing3">
</div>
</div>
<div class="wing4">
</div>
</div>

<div class="eye">
</div>
</div>

<div class="bird right" style="top: 31px; left: 72px;">
<div class="body1">
</div>
<div class="body2">
</div>
<div class="body3">
</div>
<div class="body4">
</div>
<div class="body5">
</div>

<div class="wing">
<div class="wing1">
</div>
<div class="wing2">
</div>
<div class="wing3crop">
<div class="wing3">
</div>
</div>
<div class="wing4">
</div>
</div>

<div class="eye">
</div>
</div>

<div class="bird right" style="top: 66px; left: 176px;">
<div class="body1">
</div>
<div class="body2">
</div>
<div class="body3">
</div>
<div class="body4">
</div>
<div class="body5">
</div>

<div class="wing">
<div class="wing1">
</div>
<div class="wing2">
</div>
<div class="wing3crop">
<div class="wing3">
</div>
</div>
<div class="wing4">
</div>
</div>

<div class="eye">
</div>
</div>

<div class="bird right" style="top: 35px; left: 262px;">
<div class="body1">
</div>
<div class="body2">
</div>
<div class="body3">
</div>
<div class="body4">
</div>
<div class="body5">
</div>

<div class="wing">
<div class="wing1">
</div>
<div class="wing2">
</div>
<div class="wing3crop">
<div class="wing3">
</div>
</div>
<div class="wing4">
</div>
</div>

<div class="eye">
</div>
</div>

<div class="bird left" style="top: 17px; left: 173px;">
<div class="body1">
</div>
<div class="body2">
</div>
<div class="body3">
</div>
<div class="body4">
</div>
<div class="body5">
</div>

<div class="wing">
<div class="wing1">
</div>
<div class="wing2">
</div>
<div class="wing3crop">
<div class="wing3">
</div>
</div>
<div class="wing4">
</div>
</div>

<div...

CSS

body {
    background: #fff;
}
#burung-terbang {
  padding-top:15px;
  background:#fff;
  overflow:hidden;
  position:relative;
  height:100px;
  width:100%;
  margin-bottom:15px;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
}

#air {
  position:relative;
  left:140px;
  -webkit-animation:'hover' 4s ease-in-out;
  -webkit-animation-iteration-count:infinite;
  -o-transition-property:top;
  -o-transition-duration:4s;
}

@-webkit-keyframes hover {
  0% {
    top:0;
  }
  50% {
    top:-10px;
  }
  100% {
    top:0;
  }
}

#eye1 {
  background:#fff !important;
  width:20px;
  height:20px;
  top:204px;
  left:137px;
  -webkit-border-radius:60px;
  -moz-border-radius:60px;
  border-radius:60px;
}

#eye2 {
  width:30px;
  height:30px;
  top:191px;
  left:133px;
  -webkit-border-radius:60px;
  -moz-border-radius:60px;
  border-radius:60px;
}

#whale6 {
  width:91px;
  height:52px;
  top:219px;
  left:200px;
  -webkit-border-bottom-left-radius:40px 10px;
  -moz-border-radius-bottomleft:40px 10px;
  border-bottom-left-radius:40px 10px;
  -webkit-border-bottom-right-radius:80px 80px;
  -moz-border-radius-bottomright:80px 80px;
  border-bottom-right-radius:80px 80px;
}

#whale7 {
  background:#fff !important;
  width:60px;
  height:30px;
  top:219px;
  left:222px;
  -webkit-border-bottom-left-radius:80px 80px;
  -moz-border-radius-bottomleft:80px 80px;
  border-bottom-left-radius:80px 80px;
  -webkit-border-bottom-right-radius:70px 70px;
  -moz-border-radius-bottomright:70px 70px;
  border-bottom-right-radius:70px 70px;
  -webkit-border-top-right-radius:15px 15px;
  -moz-border-radius-topright:15px 15px;
  border-top-right-radius:15px 15px;
}

.right div,
.left div {
  position:absolute;
  opacity:1;
  z-index:20;
  background:#f15a22;
}

.right,
.left {
  position:absolute;
  background:transparent !important;
  width:33px;
  height:30px;
}

.right .body1 {
  top:10px;
  left:1px;
  width:16px;
  height:19px;
 ...