JSFiddle - React, Tailwind, and code Playground

by rubatong

HTML

<div class="Baymax">
    <div class="head">
        <div class="cover-s">
            <div class="right"></div>
        </div>
        <div class="cover-x">
            <div class="right"></div>
        </div>
        <div class="eyes-r"></div>
        <div class="mourse"></div>
    </div>
    <div class="hand-l">
        <div class="hl-l"></div>
        <div class="f-1"></div>
        <div class="f-2"></div>
        <div class="f-3"></div>
    </div>
    <div class="hand-r">
        <div class="hr-r"></div>
        <div class="fr-1"></div>
        <div class="fr-2"></div>
        <div class="fr-3"></div>
    </div>
    <div class="body">
        <div class="belly"></div>
    </div>
    <div class="leg-l"></div>
    <div class="leg-r"></div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    background: #999;
}

.Baymax {
    width: 300px;
    height: 600px;
    margin: 20px auto auto auto;
    position: relative;
}

.head {
    width: 100px;
    height: 75px;
    position: absolute;
    left: 100px;
    border-radius: 50%;
    background: #FFF;
    box-shadow: 0px 6px 6px #888888,6px 6px 6px #ccc inset;
    z-index: 100;
}

.eyes-r {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    right: 20px;
    top: 35px;
}

.mourse {
    width: 25px;
    height: 3px;
    position: absolute;
    top: 42px;
    left: 75px;
    border-radius: 50%;
    box-shadow: 0px 1px 0px #000;
}

.body {
    width: 214px;
    height: 320px;
    left: 50%;
    transform: translate(-50%,0);
    position: absolute;
    border-radius: 45% 45% 50% 50%;
    top: 55px;
    background: #FFF;
    z-index: 99;
    box-shadow: 6px 0px 6px #CCC inset,-6px 0px 6px #ccc inset;
}

.belly {
    width: 224px;
    height: 264px;
    border-radius: 40% 40% 50% 50%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);
    background: #fff;
    box-shadow: 0px 3px 2px #888888, 0px -6px 6px #ccc inset;
}

.belly:before {
    width: 120px;
    height: 150px;
    position: absolute;
    border-radius: 50%;
    left: 50px;
    top: 30px;
    background: #ccc;
    content: "";
}

.leg-l {
    width: 80px;
    height: 145px;
    position: absolute;
    left: 110px;
    top: 290px;
    background: #fff;
    border-radius: 40% 30% 30% 45%;
    box-shadow: -2px 0px 2px #999 inset, 4px 0px 4px #CCC inset, -4px 0px 4px #CCC inset;
    z-index: 100;
}

.leg-r {
    width: 80px;
    height: 145px;
    position: absolute;
    right: 110px;
    top: 290px;
    background: #fff;
    border-radius: 30% 40% 45% 30%;
    box-shadow: 2px 0px 2px #999 inset, 4px 0px 4px #CCC inset, -4px 0px 4px #CCC inset;
}

.hand-l {
    width: 90px;
    height: 224px;
    position:...