JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<body>

    <div class="origami">
     <div class="kami-wrapper on-top">


            <div class="kami-mask">
                <div class="kami">
                    <span><i class="fa fa-envelope fa-4x"></i></span>
                    <p><strong>More Sign-Ups</strong></p>
                </div>
            </div>

            <div class="kami-peek-mask">
                <div class="kami kami-peek">
                    <span><i class="fa fa-envelope fa-4x"></i></span>
                    <p><strong>More Sign-Ups</strong></p>
                    <span class="kami-shadow"></span>
                </div>
            </div>




        </div>


        <div class="kami-wrapper on-bottom">
           
            <div class="kami-mask">
                <div class="kami origami-content">
                    <span><i class="fa fa-envelope fa-2x"></i></span>
                    <p><strong>More Sign-Ups</strong></p>
                    <p>Grow your email database by making it easy for your visitors to sign up on your site. A Flip Form or FlipJack can start your relationship off on the right foot.</p>
                </div>
            </div>
            
            <div class="kami-peek-mask">
                <div class="kami origami-content kami-peek">
                    <span><i class="fa fa-envelope fa-2x"></i></span>
                    <p><strong>More Sign-Ups</strong></p>
                    <p>Grow your email database by making it easy for your visitors to sign up on your site. A Flip Form or FlipJack can start your relationship off on the right foot.</p>
                    <span class="kami-shadow" style="transition: opacity 350ms linear;"></span></div>
            </div>
            
        </div>
        
    </div>


</body>

CSS

body{
    margin-top: 50px;
    margin-left: 50px;
}
.clearfix:after {
  content: "";
  display: table; 
  clear: both; 
}

.origami{
    position: relative;
    display: block;
    width: 320px;
    height: 250px;
    text-align: center;
}

.kami-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    perspective: 1240px;
    transition: z-index 0s 233.333ms;
}

.kami-wrapper.on-top{
    z-index: 20;
    transition: z-index 0s 233.333ms;
}

.kami-wrapper.on-top.click-zindex-bottom{
    z-index: 10;
}

.kami-wrapper.on-bottom.click-zindex-top{
    z-index: 20;
}

.kami-wrapper.on-top.click-zindex-top{
    z-index: 20;
}

.kami-wrapper.on-bottom.click-zindex-bottom{
    z-index: 10;
}

.kami-mask{
    position:absolute;
    width: 50%;
    top: 0;
    bottom: 0;
    overflow: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform-origin: 100% 0px 0px;
    transform: rotateY(0deg);
    transition: -webkit-transform 350ms ease-out 233.333ms;
}

.kami-peek-mask{
    position: absolute;
    top:0;
    bottom: 0;
    right: 0;
    left: 50%;
    width: 50%;
    overflow: hidden;
    
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform-origin: 0px 0px 0px;
    transition: -webkit-transform 350ms linear 0ms;
    transform: rotateY(0deg);

}

.on-top .kami-peek-mask.click-rotate{
    transform: rotateY(-90deg);
}

.on-top .kami-peek-mask.click-rotate-reverse{
    transition: -webkit-transform 0.5s linear 0ms;
    transform: rotateY(0deg);
}



.on-top .kami-peek-mask.hover-rotate{
    transform: rotateY(-30deg);
}

.kami-shadow{
    position: absolute;
    display: block;
    content: " ";
    top:0;
    left:0;
    bottom: 0;
    right: 0;
    background: black;
    margin: 0;
    width: 100%;
    height: 100%;
    transition: opacity 350ms linear;
    opacity: 0;
}

.kami-shadow.hover-opacity{
    opacity: 0.1;
}


.kami{
    position: absolute;
   ...

JavaScript

$(function(){
    $('.on-top').on('click',function(){
         $('.on-top .kami-peek-mask').removeClass('hover-rotate');
        $('.on-top .kami-peek-mask').removeClass('click-rotate-reverse'); 
        $('.on-top .kami-peek-mask').addClass('click-rotate'); 
        $('.on-top').removeClass('click-zindex-top');
        $('.on-bottom').removeClass('click-zindex-bottom');
        $('.on-top').addClass('click-zindex-bottom');
        $('.on-bottom').addClass('click-zindex-top');
        
    })
    
    $('.on-bottom').on('click',function(){
       $('.on-top .kami-peek-mask').removeClass('click-rotate');
        $('.on-top .kami-peek-mask').addClass('click-rotate-reverse'); 
        $('.on-top').removeClass('click-zindex-bottom');
        $('.on-top').addClass('click-zindex-top');
        $('.on-bottom').removeClass('click-zindex-top');
        $('.on-bottom').addClass('click-zindex-bottom');
        
    })
    
    $('.on-top').hover(
    function(){
       $('.on-top .kami-peek-mask').addClass('hover-rotate'); 
       $('.kami-shadow').addClass('hover-opacity');
    },
    function(){
       $('.kami-peek-mask').removeClass('hover-rotate'); 
       $('.kami-shadow').removeClass('hover-opacity');
    }
        
        
    
    )

})