JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<div class="card">
    <div class="tile front">
        <div class="tile outside">Outside Card</div>
        <div class="tile inside">Inside Right Card</div>
    </div>
    <div class="tile in-bottom">Inside Left Card</div>
</div>

CSS

.card {
	/* so you get the 3d effect */
	perspective: 1200px; 
	-moz-perspective: 1200px; 
	-ms-perspective: 1200px; 
    -webkit-perspective: 1200px; 
	
    height: 100px;
    width: 100px;
    margin: 20px;
    padding-top: 100px;
	padding-left: 200px;
    position: relative;
}

.tile {
    width:100px;
    height:100px;
    position: absolute;
}

.card .front {
	/* otherwise the perspective gets erased, and you lose the 3d */
	transition-duration: 0.75s;
    transform-origin: 0 0;
    transform-style: preserve-3d;
	-moz-transition-duration: 0.75s;
    -moz-transform-origin: 0 0;
    -moz-transform-style: preserve-3d;
	-ms-transition-duration: 0.75s;
    -ms-transform-origin: 0 0;
    -ms-transform-style: preserve-3d;
    -webkit-transition-duration: 0.75s;
    -webkit-transform-origin: 0 0;
    -webkit-transform-style: preserve-3d; 
	
    z-index: 2; /* the front needs to be rendered on top of the back */
}

.card .front .outside,
.card .front .inside {
    position: absolute;
	
	/* makes it so that the elements only have a front side */
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden; /* Chrome and Safari */
	-moz-backface-visibility:hidden; /* Firefox */
	-ms-backface-visibility:hidden; /* Internet Explorer */

}

.card .front .outside {
    background:red; 
}

.card .front .inside {
    background: yellow;
	
	/* flips the top-inside so its back touches the fronts back */
	transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg); 
}

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

.card.open .front {
	/*rotates the entire front (with the in- and outsides in it) if the class 'open' is added to the card */
	transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg); 
}

JavaScript

function openCard() {
    $(this).toggleClass('open');
}

$('.card').click(openCard);