JSFiddle - React, Tailwind, and code Playground

by marcuswhybrow

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<div class="flippable">
    <div class="front">
        <h3>Hi Everybody!</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut molestiae velit vel debitis facilis maiores recusandae cum beatae libero suscipit eveniet omnis ea neque alias deserunt quibusdam nam adipisci iste.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut molestiae velit vel debitis facilis maiores recusandae cum beatae libero suscipit eveniet omnis ea neque alias deserunt quibusdam nam adipisci iste.</p>
    </div>
    <div class="back">
        <h3>This is the back</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione omnis consequatur perspiciatis magni praesentium blanditiis placeat odio dolorem consequuntur laboriosam alias aut rerum repellat? Provident at excepturi assumenda eveniet nam.</p>
    </div>
</div>

CSS

body {
    background-color: #f6f6f6;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 13px;
}

.flippable {
    position: relative;
    margin: 20px auto;
    width: 300px;
}

.flippable .front,
.flippable .back {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 10px #888;
    overflow: hidden;
    
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}

.flippable .back {
    position: absolute;
    top: 0;
    left: 0;
}

.flippable h3 {
    padding: 13px 13px 10px;
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    font-weight: 300;
}
.flippable p {
    padding: 0 13px;
    color: #444;
    line-height: 1.4em;
    font-size: 12px;
}

JavaScript

$('.flippable').click(function() {
    var $box = $(this),
        $front = $box.find('.front'),
        $back = $box.find('.back'),
        currentState = $box.data('flip-state');
    
    var newHeight;
    if (currentState == 'front') {
        newHeight = $back.height();
    } else if (currentState == 'back') {
        newHeight = $front.height();
    }
            
    $box.transition({
        height: newHeight,
    });
    
    $front.transition({
        perspective: '500px',
        rotateY: '+=180deg',
    });
    
    $back.transition({
        perspective: '500px',
        rotateY: '+=180deg',
    });
    
    $box.data('flip-state', currentState == 'front' ? 'back' : 'front');
});

$('.flippable').data('flip-state', 'front');
$('.flippable .back').transition({
    perspective: '500px',
    rotateY: '180deg',
    duration: 0,
});