JSFiddle - React, Tailwind, and code Playground

HTML

<body>

  <div id="container3D">
    <div id="card">
      <div id="front">FRONT</div>
      <div id="back">BACK</div>
    </div>
  </div>


  <div id="test3d">3D</div>

</body>

CSS

body {
	margin: 0;
	padding: 0;
}
#container3D {
	width: 200px;
	height: 300px;
	margin: 20px 200px;
	background-color: skyblue;
	position: relative;
}
#card {
	width: 100%;
	height: 100%;
	background-color: red;
	
}

#front , #back {
	width: 100%;
	height: 100%;
	color: black;
	font-size: 26px;
	position: absolute;
	-webkit-transition:1.5s ease-in-out;
	   -moz-transition:1.5s ease-in-out;
	        transition:1.5s ease-in-out;
}
#front {
	background-color: yellow;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	        backface-visibility: hidden;
	-webkit-transform: perspective(800px) rotateY(0deg);
	   -moz-transform: perspective(800px) rotateY(0deg); 
	        transform: perspective(800px) rotateY(0deg);

}
#back {
	background-color: green;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	        backface-visibility: hidden;
	-webkit-transform: perspective(800px) rotateY(180deg);
	   -moz-transform: perspective(800px) rotateY(180deg); 
	        transform: perspective(800px) rotateY(180deg);
	        
}

#card:hover > #front {
	-webkit-transform: perspective(800px) rotateY(-180deg);
	   -moz-transform: perspective(800px) rotateY(-180deg); 
	        transform: perspective(800px) rotateY(-180deg);
}

#card:hover > #back {
	-webkit-transform: perspective(800px) rotateY(0);
	   -moz-transform: perspective(800px) rotateY(0); 
	        transform: perspective(800px) rotateY(0);
}

/*====================================================================================*/


#test3d {
	width: 400px;
	height: 500px;
	background-color: teal;
	margin: 10px 200px;

	-webkit-transform: perspective(1000px) rotate3d(0,0,0,0deg);
	   -moz-transform: perspective(1000px) rotate3d(0,0,0,0deg);
	    -ms-transform: perspective(1000px) rotate3d(0,0,0,0deg);

	-webkit-transition: 1s ease-in-out;
	   -moz-transition: 1s ease-in-out;
	    -ms-transition: 1s ease-in-out;
}

#test3d:hover {
	-webkit-transform: perspective(1000px)...