JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
 <h3>Hover over Smiley</h3>
    <div class="circle">
        <div class="left_circle">&nbsp;</div>
        <div class="right_circle">&nbsp;</div>
        <div class="mouth">&nbsp;</div>
    </div>
</div>

CSS

#container {
    width: 50%;
    margin: 0 auto;
    padding: 50px;
}
h3{
    color: #fff;
    text-align: center;
}
.circle {
    height: 100px;
    width: 100px;
    margin: 0 auto;
    position: relative;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
}
.left_circle {
    top: 20px;
    left: 30px;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    position: absolute;
}
.right_circle {
    top: 20px;
    right: 30px;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    position: absolute;
}
.mouth {
    -webkit-border-bottom-right-radius: 25px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-radius-bottomright: 25px;
    -moz-border-radius-bottomleft: 25px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    height: 25px;
    background-color: #000;
    position: absolute;
    width: 50px;
    left: 25px;
    top: 60px;
    
}
div#container, .circle div {
    background-color: #c00; 
}
.circle {
    background-color: #ccc;
}
.circle:hover .mouth{
    left: 36px;
    top: 70px;
}
.circle:hover {
    animation-name: hover-over;
    animation-duration: 0.2;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    -webkit-animation-name: hover-over;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
}
@keyframes hover-over {
    0% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
    50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
    100% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
}
@-webkit-keyframes hover-over {
    0% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
    50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
    100% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
}
@keyframes hover-out {
   ...