JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fire" class="kiss container" style="margin:10px;position:absolute;">

<div id="test" class="avatarface">

    <div class="facial">

        <!-- The basic facials or the shape of the face one div or many -->

    </div>

    <div class="hairs">

        <!-- All the hairs go here -->

        <!-- Okay lets just leave him bald for now, seriously how to make hairs each div / hair will make a world record of idioticnesss! lol -->

    </div>

    <div class="glasses"></div>

    <div class="eyes">

        <div class="LeftEye">

            <div class="eyeBall"></div>

        </div>

        <div class="rightEye">

            <div class="eyeBall"></div>

        </div>

    </div>

    <div class="lips">

        <div class="upperlip">

        </div>

        <div class="upperlip2">

        </div>

         <div class="tongue">

        </div>

       

        <!-- these make the face -->

    </div>

    <div class="ears">

        <div class="leftEar">

        </div>

        <div class="rightEar">

        </div>

    </div>

</div>

</div>

<input id="hell" placeholder="Takes input" /><br /> <span>
Try inputing wary , sad , kiss , grin , smile , shake , fade , rolleyes in the input box  [  more are done but i forgot how many of these have i made ] ( oh and multiple works )
<span>
<p>

     darkyens CSS-Faces v0.1 template face ( The baby basic) 
    
</p>

CSS

span{
    /* Too lazy to write a p tag with classes */
    display:block;
    margin-top:120px;
}
p{

    position:absolute;

    right:0px;

    bottom:0px;

    font-size:10px;

}



.avatarface::before{

content:' ';

    z-index:1;

position:absolute;

left:0px;

top:0px;

width:100px;

height:70px;

    border-top:3px solid black;

    border-left:3px solid black;

    border-right:3px solid black;

    border-top-left-radius:60px 40px;

    border-top-right-radius:60px 40px;

    border-bottom-right-radius:10px 40px;

    border-bottom-left-radius:10px 40px;

    display:block;

background: rgb(246,230,180); /* Old browsers */

/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2ZTZiNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk0JSIgc3RvcC1jb2xvcj0iI2Y5ZDdiZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjY2E3OGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(left,  rgba(246,230,180,1) 0%, rgba(249,215,189,1) 94%, rgba(204,167,138,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(246,230,180,1)), color-stop(94%,rgba(249,215,189,1)), color-stop(100%,rgba(204,167,138,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(left,  rgba(246,230,180,1) 0%,rgba(249,215,189,1) 94%,rgba(204,167,138,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(left,  rgba(246,230,180,1)...

JavaScript

$('#hell').on('keyup',function(e){

                    if(e.keyCode === 13){

                        $('#fire').attr('class','container '+$('#hell').val());

                    }

                });