JSFiddle - React, Tailwind, and code Playground

by RustyTheBoyRobot

HTML

<script type="text/javascript">
    
function openMyCard() {
    $('.out').addClass('openingTop');
    $('.in-top').addClass('openingBottom');
    setTimeout(function() {
        $('.out').css("z-index", "2");
        $('.in-top').css("z-index", "3");
    }, (750/2));
    setTimeout(function(){
        $('.out').removeClass('openingTop').addClass('topOpen');
        $('.in-top').removeClass('openingBottom').addClass('bottomOpen');
    }, 750);
}
</script>

<div class="perspective">
    <div class="tile out">
      <button onclick="openMyCard();">Open</button>
    </div>
    <div class="tile in-top">
        <p>Word inside</p>
    </div>
    <div class="tile in-bottom">
    </div>
</div>

CSS

.tile {
    position:absolute;
    width:200px;
    height:100px;
    margin:20px;
    top: 150px;
}

.out {
     background:red;  
    z-index: 3;
    
}

.in-top {
background: yellow;    
      z-index: 2;
    top: 50px;
    -moz-transform: rotateX(-180deg);
    -moz-transform-origin: 0% 100%;
    -webkit-transform: rotateX(-180deg);
    -webkit-transform-origin: 0% 100%;    
}

.in-bottom {
 background: blue;   
    z-index: -1;
}


.openingTop {
    /* Webkit */
    -webkit-animation-name: open-card;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 0.75s;
    -webkit-transition-delay: 0s;
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-direction: alternate;
    /* Mozilla */
    -moz-animation-name: open-card;
    -moz-animation-timing-function: ease;
    -moz-animation-duration: 0.75s;
    -moz-transition-delay: 0s;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: alternate;
}

.openingBottom {
    /* Webkit */
    -webkit-animation-name: open-card-bottom;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 0.75s;
    -webkit-transition-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    /* Mozilla */
    -moz-animation-name: open-card-bottom;
    -moz-animation-timing-function: ease;
    -moz-animation-duration: 0.75s;
    -moz-transition-delay: 0s;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: alternate;
}

.topOpen {
    -moz-transform: rotateX(180deg);
    -moz-transform-origin: 0 0;
    -webkit-transform: rotateX(180deg);
    -webkit-transform-origin: 0 0;
}
.bottomOpen {
    -moz-transform: rotateX(0deg);
    -moz-transform-origin: 0 0;
    -webkit-transform: rotateX(0deg);
    -webkit-transform-origin: 0 0;    
}

/* Mozilla */
@-moz-keyframes open-card {
    from {
       -moz-transform: rotateX(0deg);
       -moz-transform-origin: 0% 0%;
    }
    to {
       -moz-transform: ...