JSFiddle - React, Tailwind, and code Playground

by memed

HTML

<div class="row">
    <div class="col-4">
        <div class="smile smile-1">
            <div class="eyes"></div>
            <div class="mouth"></div>
        </div>
    </div>
    <div class="col-4">
        <div class="smile smile-2">
            <div class="eyes"></div>
            <div class="mouth"></div>
        </div>
    </div>
    <div class="col-4">
        <div class="smile smile-3">
            <div class="eyes"></div>
            <div class="mouth"></div>
        </div>
    </div>
    <div class="col-4">
        <div class="smile smile-4">
            <div class="eyes"></div>
            <div class="mouth"></div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-4">
        <div class="smile smile-5">
            <div class="eyes"></div>
            <div class="mouth"></div>
        </div>
    </div>
    <div class="col-4">
        <div class="smile smile-6">
            <div class="eyes"></div>
            <div class="mouth"></div>
        </div>
    </div>
    <div class="col-4">
        <div class="smile smile-7">
            <div class="eyes"></div>
            <div class="mouth"></div>
        </div>
    </div>
    <div class="col-4">
        <div class="smile smile-8">
            <div class="eyes"></div>
            <div class="mouth"></div>
        </div>
    </div>
</div>

CSS

.row {
    overflow: hidden;
}
.col-4 {
    width: 25%;
    box-sizing: border-box;
    padding: 20px;
    float: left;
}
.smile {
    width: 70px;
    height: 70px;
    padding: 1px;
    margin: 0 auto;
    border-radius: 100%;
    position: relative;
    cursor: pointer;
    background: #f9d42c;
    box-shadow: 4px -3px 6px #dbb60c inset;
}
.smile:after {
    content: '';
    position: absolute;
    bottom: -10px;
    width: 60px;
    height: 18px;
    border-radius: 50%;
    margin-left: 5px;
    z-index: -1;
    background: -moz-radial-gradient(center, ellipse cover,  rgba(102,102,102,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(102,102,102,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(102,102,102,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(102,102,102,1) 0%,rgba(255,255,255,0) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(102,102,102,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(102,102,102,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
}
.eyes {
    position: absolute;
    top: 15px;
    width: 100%;
    height: 28px;
}
.eyes:before,
.eyes:after {
    content: '';
    width: 15px;
    height: 17px;
    position: absolute;
    top: 0;
    background: #000;
    border-radius: 100%;
    left: 16px;
}
.eyes:after {
    left: auto;
    right: 16px;
}
.mouth {
    background: #000;
    height: 1px;
    width: 60%;
    margin: 42px auto 0;    
    position: relative;
}


.smile-1:hover .mouth {
    height: 10px;
    border-bottom: 1px solid #000;
    border-radius: 0 0 20px 20px;
}

.smile-1-1.mouth {
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
 ...