JSFiddle - React, Tailwind, and code Playground

by vinnywww

HTML

<div class="spanch-bob">
            <div class="flap"></div>

            <div class="eyelashes-wrapper">
                <div class="eyelashes">
                    <div class="eyelashes-left"></div>
                    <div class="eyelashes-middle"></div>
                    <div class="eyelashes-right"></div>
                </div>
                <div class="eyelashes">
                    <div class="eyelashes-left"></div>
                    <div class="eyelashes-middle"></div>
                    <div class="eyelashes-right"></div>
                </div>
            </div>

            <div class="eyes">
                <div class="eye eye-left">
                    <div class="eyelid eyelid-top"></div>
                    <div class="pupil"></div>
                    <div class="eyelid eyelid-bottom"></div>
                </div>
                <div class="eye eye-right">
                    <div class="eyelid eyelid-top"></div>
                    <div class="pupil"></div>
                    <div class="eyelid eyelid-bottom"></div>
                </div>
            </div>

            <div class="nose"></div>

            <div class="freckles">
                <div class="freckles-left"></div>
                <div class="freckles-right"></div>

                <div class="dimple dimple-left"></div>
                <div class="dimple dimple-right"></div>
            </div>

            <div class="mouth">
                <div class="tooth"></div>
                <div class="tooth"></div>
                <div class="mouth-open">
                    <div class="hole"></div>
                </div>
            </div>
        </div>

CSS

/* reset */
html, body, div{
    margin:0;
    padding:0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    line-height: 0;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

html, body{
    position: relative;
    height: 100%;
    background-color: #fff;
}

.spanch-bob{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 150px;
    margin: -75px 0 0 -100px;
    background-color: #ffee34;
}

/* =============== eyes =============== */

.eyes{
    position: relative;
    text-align: center;
    z-index: 100;
}

.eye{
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 2px solid black;
    border-radius: 50%;
    background-color: white;
    overflow: hidden;
}

.eye-left{
    left: 1px;
}

.eye-right{
    right: 1px;
}

.pupil{
    position: absolute;
    top: 13px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid black;
    background-color: black;
    box-shadow: inset 0 0 0 5px #38bbf1;
    z-index: 0;
}

.eye-left .pupil{
    left: 12px;
    -webkit-animation: eye-left-move 5s ease-in-out 2s infinite;
    -moz-animation: eye-left-move 5s ease-in-out 2s infinite;
    -ms-animation: eye-left-move 5s ease-in-out 2s infinite;
    animation: eye-left-move 5s ease-in-out 2s infinite;
}

.eye-right .pupil{
    right: 12px;
    -webkit-animation: eye-right-move 5s ease-in-out 2s infinite;
    -moz-animation: eye-right-move 5s ease-in-out 2s infinite;
    -ms-animation: eye-right-move 5s ease-in-out 2s infinite;
    animation: eye-right-move 5s ease-in-out 2s infinite;
}

.eyelashes-wrapper{
    position: relative;
    height: 0;
    margin-top: 25px;
    text-align: center;
    z-index: 100;
}

.eyelashes{
    display: inline-block;
    position: relative;
    top: -8px;
    width: 50px;
    text-align: center;
    -webkit-animation: eyelashes-move 5s...