JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<div id="container">
    <div id="animation-image">
    </div>
</div>

CSS

#container {
      width: 16px;
      height: 28px;
      overflow: hidden;
      outline: 1px dotted #999;
      position: relative;
      left: 45%;
      transform: translateY(100px) scale(2);
    }
    #animation-image {
      width: 528px;
      height: 19px;
      background:...

JavaScript

var elm = document.querySelector('#animation-image');
elm.onclick = function() {
  elm.classList.add('animate');
  setTimeout(function() {
    elm.classList.remove('animate');
  }, 550);
};