JSFiddle - React, Tailwind, and code Playground

HTML

<div style="margin: 100px">

			<div class="cube" id="cube" onclick="this.className = this.className == 'cube' ? 'cube cube-flipped' : 'cube';">
				<div class="cube-content">
					<div class="front">front</div>
					<div class="back">back</div>
				</div>
			</div>
		
		</div>

CSS

.cube .cube-content {
				-webkit-perspective: 1000px;
				-moz-perspective: 1000px;
				-o-perspective: 1000px;
				perspective: 1000px;
				width: 200px;
				height: 200px;
				position: relative;
			}

			.cube .cube-content .front {
				position: absolute;
				width: 200px;
				height: 200px;
				background: red;
				z-index: 2;

				-webkit-transition: all 0.5s ease-in-out;
				-webkit-transform-style: preserve-3d;
				-webkit-transform-origin: 50% 50% -100px;
				
				-moz-transition: all 0.5s ease-in-out;
				-moz-transform-style: preserve-3d;
				-moz-transform-origin: 50% 50% -100px;

				-o-transition: -o-transform 0.5s;
				-o-transform-style: preserve-3d;
				-o-transform-origin: 50% 50% -100px;
				
				transition: all 0.5s ease-in-out;
				transform-style: preserve-3d;
				transform-origin: 50% 50% -100px;

				-webkit-box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    box-sizing: border-box;
			}

			.cube .cube-content .back {
				position: absolute;
				width: 200px;
				height: 200px;
				background: green;
				z-index: 1;

				-webkit-transition: all 0.5s ease-in-out;
				-webkit-transform-style: preserve-3d;
				-webkit-transform-origin: 50% 50% -100px;
				-webkit-transform: rotateY(90deg);

				-moz-transition: all 0.5s ease-in-out;
				-moz-transform-style: preserve-3d;
				-moz-transform-origin: 50% 50% -100px;
				-moz-transform: rotateY(90deg);

				-o-transition: all 0.5s ease-in-out;
				-o-transform-style: preserve-3d;
				-o-transform-origin: 50% 50% -100px;
				-o-transform: rotateY(90deg);
				
				transition: all 0.5s ease-in-out;

				transform-style: preserve-3d;
				transform-origin: 50% 50% -100px;
				transform: rotateY(90deg);

				-webkit-box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    box-sizing: border-box;
			}

			.cube-flipped .cube-content .front {
				-webkit-transform: rotateY(-90deg);
				-moz-transform: rotateY(-90deg);
				-o-transform: rotateY(-90deg);
				transform:...