JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pricetag_container">
    Lorem Ipsum
          <div id="pricetag_overlay1" class=""> 
       <a class="pricetag_overlay1 css-transition">
          clickme
       </a>
      </div>
</div>

CSS

.pricetag_container {
    border: 12px solid #2e2e2e;
    background-color:#121212;
    margin-left:-.75cm;
    width: 814px;
    height: 150px;
    position: relative;
    padding:10px 25px 10px 10px;
    /*overflow:hidden; this makes the animation fall inwards */ 
}

#pricetag_overlay1 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background:#252525;
}

#pricetag_overlay1 a {
color:#343434;
cursor:pointer;
font:5em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
line-height:150px;
text-shadow:-1px -1px 0 rgba(0,0,0,.24), 1px -1px 0 rgba(0,0,0,.24), -1px 1px 0 rgba(0,0,0,.24), 1px 1px 0 rgba(0,0,0,.24);
}

#pricetag_overlay1 a:hover,#pricetag_overlay1 a:visited:hover {
color:#CE2276;
}

/* ANIMATION CLASSES */

.css-transition {-webkit-transition:all 0.8s ease-in-out; -moz-transition:all 0.8s ease-in-out; -o-transition:all 0.8s ease-in-out; -ms-transition:all 0.8s ease-in-out; transition:all 0.8s ease-in-out;}

@-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);opacity:1;-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}100%{-webkit-transform:translateY(700px);opacity:0}}
@-moz-keyframes hinge{0%{-moz-transform:rotate(0);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}20%,60%{-moz-transform:rotate(80deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}40%{-moz-transform:rotate(60deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}80%{-moz-transform:rotate(60deg) translateY(0);opacity:1;-moz-transform-origin:top...

JavaScript

$(document).ready(function(){    
         
           $('#pricetag_overlay1 a').click(function(){ 
              
                $('#pricetag_overlay1').addClass('animated hinge');
            }); 
     $('#pricetag_overlay1').on('animationend mozanimationend webkitAnimationEnd oAnimationEnd msanimationend', function () {
  $(this).remove();
});
     }); //window