JSFiddle - React, Tailwind, and code Playground

HTML

<p id="face"></p><p id="face"></p><p id="face"></p><p id="face"></p>

CSS

#face {
    font-family: sans-serif;
    font-size: 5em;
    margin: 50px;
    padding: 10px;
    text-align: center;
    border: 3px solid #000;
    border-radius:50px;
    background: #fcc;
    width: 100px;
    height: 120px;
}

JavaScript

var faces = ["'_d'", "'-'", "'.'", "'-'"];
var step = 300;
var i = 0;

$(document).ready(function () {
    setInterval(function(){$("#face").text(faces[i]); if (++i>3) { i = 0; }}, step);
});