JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">


<<div class='me'>

                <div class="torso">
                    <div class="left leg">
                        <div class="left thigh">
                            <div class="left shin">
                                <div class="left foot">
                                    <div class="left toes"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="right leg">
                        <div class="right thigh">
                            <div class="right shin">
                                <div class="right foot">
                                    <div class="right toes"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="left arm">
                        <div class="left bicep">
                            <div class="left forearm">
                                <div class="kite"></div>
                            </div>
                        </div>
                    </div>

                    <div class="right arm">
                        <div class="right bicep">
                            <div class="right forearm"></div>
                        </div>
                    </div>

                </div>
            </div>
</div>

CSS

.wrapper{
  position: relative;
  -webkit-transform: scale(0.4);
}
.me,.me div{
    background-repeat: no-repeat;
    position: absolute;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
.me{
    top: 80px;
    left: 350px;
    -webkit-animation-name: me;
}
.torso{
    height: 274px;
    width: 86px;
    background-image: url("https://s9.postimg.org/41xfy5cin/torso.png");
}

.arm{
    left: 12px;
    -webkit-transform-origin: 20px 10px;
}

.kite{
    
    width: 395px;
    height: 424px;
    top: -115px;
    left: 0px;
    
    background-image: url("https://s3.postimg.org/ix240ioab/kite.png");
    -webkit-transform: rotate(45deg) scale(0.6);
    
}
.right.bicep{
    width: 51px;
    height: 124px;
    background-image: url("https://s3.postimg.org/mlrszzyb7/right-bicep.png");
}
.left.bicep{
    width: 52px;
    height: 126px;
    background-image: url("https://s3.postimg.org/jb3g048dv/left-bicep.png");
}
.left.forearm{
    width: 37px;
    height: 124px;
    background-image: url("https://s3.postimg.org/7ahzze0z7/left-forearm.png");
    -webkit-transform: rotate(-45deg);
}
.right.forearm{
    width: 36px;
    height: 121px;
    background-image: url("https://s3.postimg.org/q6noj82ur/right-forearm.png");
    -webkit-animation-name: right-forearm;
}
.left.thigh{
    width: 69px;
    height: 144px;
    background-image: url("https://s3.postimg.org/577krq16b/left-thigh.png");
}
.right.thigh{
    width: 69px;
    height: 144px;
    background-image: url("https://s3.postimg.org/72ud2vq0j/right-thigh.png");
}
.shin{
    width: 53px;
    height: 173px;
    background-image: url("https://s3.postimg.org/3xecqews3/shin.png");
}
.foot{
    width: 67px;
    height: 34px;
    background-image: url("https://s3.postimg.org/l0cj86o37/foot.png");
}
.toes{
    width: 28px;
    height: 25px;
    background-image: url("https://s3.postimg.org/vm0zxxjsj/toes.png");
}

.right.arm{
    top: 93px;
   ...