JSFiddle - React, Tailwind, and code Playground

by mich

HTML

<div id="card">
    
    <div id="card-inside">
        <div class="wrap">
            <p>Hoi zusje,</p>
            <p>Nen dikke proficiat met uw 25ste verjaardag!</p>
            <p>Ik hoop alvast dat ge u niet te veel zorgen over school hoeft te maken vandaag, en dat ge de kans hebt om ervan te genieten.</p>
            <p>Wanneer ik in Belgi&euml; ben zal ik u als cadeau eens laten winnen met Dalton City. ;-)</p>
            <p>Dikke knuffel en vele groetjes,</p>
            <p class="signed">Micha&euml;l</p>
        </div>
    </div>
   <div id="card-front">
       <div class="wrap">
           <h1>Happy birthday!</h1>
       </div>
    </div>
</div>

<button id="open">Open</button>
<button id="close">Close</button>

CSS

@import url(http://fonts.googleapis.com/css?family=Nobile:400italic,700italic);
@import url(http://fonts.googleapis.com/css?family=Dancing+Script);
* {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
}
body {
  background: #E5E5E5;
    background-image: url("http://www.transparenttextures.com/patterns/gray-floral.png");
  padding: 50px;
}

#card-front {
    color: #FFDFDF;
}

#card, #card-front, #card-inside {
  height: 480px;
}

.wrap {
    padding: 1.5em 2.5em;
    height: 100%;
}
#card-front, #card-inside {
    width: 50%;
    box-shadow: 2px 2px 30px rgba(0, 0, 0, .25), 0 0 1px rgba(0, 0, 0, .5);
    position: absolute;
    left: 50%;
}


#card-inside .wrap {
    background: #FFEFEF;
    box-shadow: inset 2px 0 1px rgba(0, 0, 0, .05);
}
#card {
    max-width: 960px;
    margin: 0 auto;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    perspective: 5000px;
    position: relative;
}

#card h1 {
    text-align: center;
    font-family: 'Nobile', sans-serif;
    font-style: italic;
    font-size: 70px;
    text-shadow: 
        4px 4px 0px rgba(0, 0, 0, .15),
        1px 1px 0 rgba(255, 200, 200, 255),
        2px 2px 0 rgba(255, 150, 150, 255),
        3px 3px 0 rgba(255, 125, 125, 255);
    color: #FFF;
}
#card-inside {
    font-size: 1.2em;
    line-height: 1.6;
    font-family: 'Nobile';
    color: #331717;
    font-style: italic;
}
p {
    margin-top: 1em;
}
p:first-child {
    margin-top: 0;
}
p.signed {
    margin-top: 1.5em;
    text-align: center;
    font-family: 'Dancing Script', sans-serif;
    font-size: 1.5em;
}

#card-front {
    background-color: #FF5555;
    background-image: -moz-linear-gradient(top, #FF5555 0%, #FF6666 100%);
    transform-origin: left;
    transition: transform 1s linear;
}

#card-front .wrap {
    transition: background 1s linear;
}

#card.open-half #card-front,
#card.close-half #card-front {
    transform: rotateY(-90deg);
}
#card.open-half #card-front .wrap {
    background-color:...

JavaScript

(function($) {
    $(function() {
        var $card = $('#card'),
            $openB = $('#open'),
            $closeB = $('#close'),
            timer = null;
        
        $openB.click(function() {
            $card.addClass('open-half');
            if (timer) clearTimeout(timer);
            timer = setTimeout(function() {
                $card.removeClass().addClass('open-fully');
                timer = null;
            }, 1000);
        });
        
        $closeB.click(function() {
            $card.removeClass().addClass('close-half');
            if (timer) clearTimeout(timer);
            timer = setTimeout(function() {
                $card.removeClass();
                timer = null;
            }, 1000);
        });
    });
}(jQuery));