JSFiddle - React, Tailwind, and code Playground

by Grezzo

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<div id="card" class="card">
    <div id="front" class="front face"></div>
    <div id="back" class="back face">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu nulla sit amet neque mattis sagittis. Nam nec est in velit venenatis ultrices. Praesent quis nisi nec justo cursus bibendum vitae ut velit. Praesent rhoncus suscipit neque non commodo. Nulla eget lorem non velit sollicitudin elementum ut non tortor. Mauris viverra elit vel leo tempus a rhoncus augue interdum. Fusce ultrices euismod sem, sed ornare massa fermentum vitae. Nam porta, dui ut condimentum accumsan, diam tortor molestie metus, in suscipit arcu orci sed tortor. Suspendisse molestie dui sed lectus semper vel iaculis arcu convallis. Vestibulum posuere lobortis fringilla. Morbi sit amet felis eget ante malesuada ullamcorper ac nec elit.</p>
    </div>
</div>

CSS

body {
    margin: 0;
    color: lightgrey;
    perspective: 1000;
}
html, body, .card, .face {
    background-color: black;
    height: 100%;
    width: 100%;
}
.face {
    position: absolute;
    backface-visibility: hidden;
}
.card {
    transition: all .5s; 
    transform-style: preserve-3d;
}
.front {
    background-image: url(http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2012/5/18/1337331092888/Cwm-Idwal-Snowdonia.-Mich-007.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.back, .flipped {
    transform: rotateY(-180deg);
}

JavaScript

//This stops repeated jQuery selector calls for the same object
var $card = $("div#card");
//Keyboard shortcuts:
$(document).on('keydown', function(e) {
    switch(e.which) {
        case 73: //73 is i key
            $card.toggleClass("flipped");
    }
});