JSFiddle - React, Tailwind, and code Playground

by budyniowski

HTML

<div class="body1">
        <div class="chest">
            <div class="left"><div class="clavicle"></div></div>
            <div class="right"><div class="clavicle"></div></div>
        </div>

        <div class="breast">
            <div class="left"><ul class="boob"><li class="nipple"></li></ul></div>
            <div class="right"><ul class="boob"><li class="nipple"></li></ul></div>
            <div class="between"></div>
        </div>

        <div class="belly">
            <div class="left"></div>
            <div class="button">O</div>
            <div class="right"></div>
        </div>

        <div class="thigh">
            <div class="left"></div>
            <div class="right"></div>
        </div>

    </div>

CSS

.body1 {
    margin: 60px auto 0;
    width: 400px;
    height: 280px;
    padding-top: 40px;
    overflow: hidden;
    position: relative;
}

.chest {
    width: 230px;
    margin: 0 auto;
    height: 80px;
    position: relative;
    z-index: 2;
}

.chest .left, .chest .right {
    position: absolute;
    top: 0;
    width: 90px;
    height: 40px;
    border: 1px solid black;
    border-bottom: none;
    background: white;
}

.chest .left {
    left: 0;
    -moz-border-radius: 40px 0 0 0;
    -webkit-border-top-left-radius: 40px;
    border-top-left-radius: 40px;
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    border-right: none;
}

.chest .right {
    right: 0;
    -moz-border-radius: 0 40px 0 0;
    -webkit-border-top-right-radius: 40px;
    border-top-right-radius: 40px;
    -moz-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    border-left: none;
}

.chest .clavicle {
    position: absolute;
    top: 10px;
    height: 0;
    width: 46px;
    border-top: 1px solid gray;
}

.chest .left .clavicle {
    left: 40px;
    -moz-transform: rotate(21deg);
    -webkit-transform: rotate(21deg);
    -o-transform: rotate(21deg);
}
.chest .right .clavicle {
    right: 40px;
    -moz-transform: rotate(-21deg);
    -webkit-transform: rotate(-21deg);
    -o-transform: rotate(-21deg);
}

.breast {
    width: 222px;
    height: 40px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.breast .left {
    position: absolute;
    left: 0;
    top: 0;
    float: left;
    -webkit-animation: bounce 1s infinite;
}

.breast .right {
    position: absolute;
    right: 0;
    top: 0;
    float: right;
    -webkit-animation: bounce 1s infinite;
}

.breast .between {
    margin: 0 auto;
    width: 1px;
    height: 26px;
    border-right: 1px solid #d3d3d3;
    position: relative;
    top: -26px;
}

.breast .boob {
    border: 1px solid black;
    border-top:...