JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.ubhape2.com/testing/css/1140.css">
<link rel="stylesheet" href="http://www.ubhape2.com/testing/css/styles.css">
<link rel="stylesheet" href="http://www.ubhape2.com/css/animate.css">
<div id="page-wrap">
<div class="container">
      <div class="pad">&nbsp;</div>
    <div class="row">
    <div class="threecol">&nbsp;</div>
    <div class="twocol">
      <div id="left-bottom" class="animated fadeInLeftBig click left-bottom panel">
      <div class="front">
      <img src="http://www.ubhape2.com/testing/images/artist.jpg" alt="Info for Artist"> 
      </div>
        <div class="back">
            <img src="http://www.ubhape2.com/testing/images/artist-back.jpg" alt="Info for Artist">
        </div>
      </div>
    </div>
    
    <div class="twocol">
      <div id="middle-bottom" class="animated fadeInUpBig click middle-bottom panel">
      <div class="front">
      <img src="http://www.ubhape2.com/testing/images/blog.jpg" alt="Blog"> 
      </div>
      <div class="back">
      <img src="http://www.ubhape2.com/testing/images/blog-back.jpg" alt="Blog">
        </div>
      </div>
    </div>
    
      <div class="twocol">
      <div id="right-bottom" class="animated fadeInRightBig click right-bottom panel">
      <div class="front">
        <img src="http://www.ubhape2.com/testing/images/contact.jpg" alt="Contact"> 
        </div>
        <div class="back">
            <img src="http://www.ubhape2.com/testing/images/contact-back.jpg" alt="Contact">
        </div>
        </div>
    </div>
    <div class="threecol last">&nbsp;</div>
  </div>
</div>
</div>

CSS

#page-wrap{background: url(http://www.ubhape2.com/testing/images/purple_texture.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    /* Cover for IE 7/8 */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.ubhape2.com//testing/images/purple_texture.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.ubhape2.com//testing/images/purple_texture.jpg', sizingMethod='scale');
    /* End Cover for IE 7/8 */
    background-size: cover;
    background-color: transparent !important;
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    }

.pad{
    padding:.5em;
    }



    #left-top, #middle-top, #right-top, #left-bottom, #middle-bottom, #right-bottom{ 
        position:relative;
    }
    



        /* FLIP ANIMATION */
        
        .panel {
            float: left;
            width: 12.5em;
            height: 12.5em;
            margin: 1.250em;
            position: relative;
            font-size: .8em;

        }
        /* -- make sure to declare a default for every property that you want animated -- */
        /* -- general styles, including Y axis rotation -- */
        .panel .front {
            float: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 900;
            width: inherit;
            height: inherit;

            -webkit-transform: rotateX(0deg) rotateY(0deg);
            -webkit-transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;

            -moz-transform: rotateX(0deg) rotateY(0deg);
            -moz-transform-style: preserve-3d;
            -moz-backface-visibility: hidden;

            /* -- transition is the magic sauce for animation -- */
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
           ...

JavaScript

$(document).ready(function(){
        
    function animationClick(element, animation){
    element = $(element);
    element.click(
        function() {
            element.addClass('animated ' + animation);          
            //wait for animation to finish before removing classes
            window.setTimeout( function(){
                element.removeClass('animated ' + animation);
            }, 2000);           
 
        });
    }  
    
    animationClick('.click', 'icon-flip');   
            
            
});