JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-display-avatar ng-scope" ng-if="!loadingAvatar &amp;&amp; svg_avatar_complete" style="">
            <div class="container-avatar">
                <div class="my-avatar" ng-show="svg_avatar_complete">

                    <!-- ngIf: avatarUser.face != null --><style ng-if="avatarUser.face != null" type="text/css" class="ng-binding ng-scope">

                        .my-avatar .model-body-1 .body-1 {
                        fill:#fee8c9!Important;
                        visibility:visible;
                        opacity:1;
                        }

                        .my-avatar .hair-color .cabeca-1 {
                        fill:#fee8c9
                        }

                        .my-avatar .face-color .cabeca-1{fill:#fee8c9!Important}
                        .my-avatar .face-color .cabeca-2{fill:#f2bfa4!Important}
                        .my-avatar .face-color .cabeca-3{fill:#fde1c7!Important}
                        .my-avatar .face-color .cabeca-4{fill:#f2bfa4!Important}
                        .my-avatar .face-color .cabeca-5{fill:#f2746a;opacity:0.15!Important}


                        .my-avatar .eye-color .eye-9-item-3,
                        .my-avatar .eye-color .eye-11-item-3,
                        .my-avatar .eye-color .eye-12-item-5,
                        .my-avatar .eye-color .eye-13-item-5,
                        .my-avatar .mouth-color .mouth-2-item-boca-1,
                        .my-avatar .mouth-color .mouth-3-item-boca-1,
                        .my-avatar .mouth-color .mouth-4-item-boca-1,
                        .my-avatar .mouth-color .mouth-8-item-boca-1 {
                         fill:#f5cfbc
                        }
                        .my-avatar .mouth-color .mouth-17-item-boca-1,
                        .my-avatar .mouth-color .mouth-18-item-boca-1,
                        .my-avatar .mouth-color .mouth-19-item-boca-1 {
                         fill:#f2bfa4
                        }
   ...

CSS

.my-avatar .model-accessory-1 {
    width: 124px;
    height: 124px;
    position: absolute;
    top: 1px;
    margin-left: 62px;
    z-index: 21;
}
.my-avatar .model-accessory-1 svg {
    width: 127px!important;
    height: 127px!important;
}
.my-avatar .model-accessory-2 {
    width: 124px;
    height: 124px;
    position: absolute;
    top: 1px;
    margin-left: 62px;
    z-index: 21;
}
.my-avatar .model-accessory-3 {
    width: 118px;
    height: 118px;
    position: absolute;
    top: 6px;
    margin-left: 67px;
    z-index: 21;
}
.my-avatar .model-accessory-4 {
    width: 117px;
    height: 117px;
    position: absolute;
    top: 7px;
    margin-left: 67px;
    z-index: 21;
}
.my-avatar .model-accessory-5 {
    width: 112px;
    height: 112px;
    position: absolute;
    top: 9px;
    margin-left: 70px;
    z-index: 21;
}
.my-avatar .model-accessory-6 {
    width: 127px;
    height: 127px;
    position: absolute;
    top: 2px;
    margin-left: 63px;
    z-index: 21;
}
.my-avatar .model-accessory-7 {
    width: 147px;
    height: 147px;
    position: absolute;
    top: -36px;
    margin-left: 55px;
    z-index: 21;
}
.my-avatar .model-beard-1 {
    position: absolute;
    height: auto;
    top: -16px;
    margin-left: 64px;
    z-index: 9;
}
.my-avatar .model-beard-1 svg {
    width: 124px;
}
.my-avatar .beard-adapt-model-face-3.model-beard-1 {
    top:-14px;
}
.my-avatar .beard-adapt-model-face-4.model-beard-1 {
    top: -14px;
    margin-left: 67px;
}
.my-avatar .beard-adapt-model-face-4.model-beard-1 svg {
    width: 116px;
}

.my-avatar .beard-adapt-model-face-5.model-beard-1 {
    top: -18px;
    margin-left: 71px;
}
.my-avatar .beard-adapt-model-face-5.model-beard-1 svg {
   width: 110px;
}

.my-avatar .beard-adapt-model-face-6.model-beard-1 {
    top: -18px;
    margin-left: 82px;
}
.my-avatar .beard-adapt-model-face-6.model-beard-1 svg {
    width: 89px;
}


.my-avatar .model-beard-10 {
    position: absolute;
    height: auto;
    top: -25px;
   ...