JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
		
		<div class="back"><div style="top:45%;text-align:center;position:relative;">BACK</div></div>
		<div class="front"><div style="top:45%;text-align:center;position:relative;">FRONT</div></div>
	
	</div>

CSS

.container{
			
			width:170px;
			height:280px;
			display:inline-block;
			position:relative;
			transform: perspective(400px);
			cursor:pointer;
			          
		}
		.front{
		
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-color:blue;		  
			transform: perspective(400px) rotateY(0deg);		
			backface-visibility: hidden;
  		transition: 1.0s;
      opacity:1;
      box-shadow: 0 8px 6px -6px black;
		}
		.back{
			
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-color:green;		  
			transform: perspective(400px) rotateY(-180deg);			
			backface-visibility: hidden;
			transition: 1.0s;
      opacity:0;
      box-shadow: 0 8px 6px -6px black;
		}		
		.flip-front{
		  opacity:0;
			transform: perspective(400px) rotateY(180deg);
			
		}
		.flip-back{
      opacity:1;  
			transform: perspective(400px) rotateY(0deg);
		}

JavaScript

var state = 0;
			
			$('.container').on('click',function(){
				if(state == 0){
					
					state = 1;
					$('.front').addClass('flip-front');
					$('.back').addClass('flip-back');
					
				}
				else{
					
					state = 0;
					$('.front').removeClass('flip-front');
					$('.back').removeClass('flip-back');
					
				}	
			});