JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>


<div class="box_holder">

	<div class="front">

	Some content here

	</div>

	<div class="back">

	Behind

	</div>

</div>

CSS

.box_holder {
	display: block;
    position: relative;
    float: left;
    left: 8px;
    top: 8px;
    width: 240px;
    height: 335px;
    text-align: center;
    font-family: 'ProximaNova','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-weight: normal;
    background: #C3C3C3;
    color: #3b3b3b;
    font-size: 1em;
    line-height: 1.32;
    margin-right: 16px;
    margin-bottom: 32px;
    transition: 1s;
}

.box_holder.show_info {
    -ms-transform: rotateY(180deg); /* IE 9 */
    -webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
    transform: rotateY(180deg);
}

.box_holder.show_info .front{
	-ms-transform: rotateY(180deg); /* IE 9 */
    -webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
    transform: rotateY(180deg);
}

.box_holder.show_info .back{
    -ms-transform: rotateY(180deg); /* IE 9 */
    -webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
    transform: rotateY(180deg);
}

.front {
backface-visibility:hidden;
transition:1s;
}

.back {
transition:1s;
}

.show_info .back {
}

JavaScript

$(document).ready(function() {
  $('.box_holder').click(function() {
    $(this).toggleClass('show_info')
  });
});