JSFiddle - React, Tailwind, and code Playground

by volpeo

HTML

<div class="stage">
  <div class="flashcard">
    <div class="front">
      <p>Front</p>
    </div>
    <div class="back">
      <p>Back</p>
    </div>
  </div>  
</div>

CSS

.stage {
  -webkit-perspective: 1000; 
}

.flashcard {
  height: 300px;  
  width: 500px; 
  margin: 10% auto;
  border: 1px solid gray; 
  box-shadow: 2px 2px 2px #000;
  -webkit-transform-style: preserve-3d;  
  transition: all 0.3s;               
  -webkit-transition: all 0.3s;
}

.flipped, .back {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg); 
}

.front, .back {
  height: 300px;          
  width: 500px;
  position: absolute;    
  text-align: center;   
  -webkit-backface-visibility: hidden;       
}

.front p, .back p {
  margin-top: 25%;       
  font-size: 3em;
}

JavaScript

$(document).ready(function() {
  $('.flashcard').on('click', function() {
    $('.flashcard').toggleClass('flipped');
    setTimeout(function(){
    	$('.flashcard').toggleClass('flipped');
    }, 3000);
  });
});