JSFiddle - React, Tailwind, and code Playground

by Maulik Anand

HTML

<div style="height: 300px;margin-top:40px;">
	<div class="cube-wrap">
		<div class="cube depth">
			<div class="back-pane">back</div>
			<div class="left-pane">left</div>
			<div class="right-pane">right</div>
		</div>
	</div>
	</div>

CSS

/*************** ANIMATIONS ***************/
		@-webkit-keyframes spin {
			from { -webkit-transform: rotateY(0); }
			to { -webkit-transform: rotateY(360deg); }
		}

		@-ms-keyframes spin {
			from { ms-transform: rotateY(0); }
			to { ms-transform: rotateY(360deg); }
		}

		@keyframes spin {
			from { transform: rotateY(0); }
			to { transform: rotateY(360deg); }
		}

		@-webkit-keyframes spin-vertical {
			from { -webkit-transform: rotateX(0); }
			to { -webkit-transform: rotateX(-360deg); }
		}

		@-ms-keyframes spin-vertical {
			from { ms-transform: rotateX(0); }
			to { ms-transform: rotateX(-360deg); }
		}

		@keyframes spin-vertical {
			from { transform: rotateX(0); }
			to { transform: rotateX(-360deg); }
		}

		
		/*************** STANDARD CUBE ***************/
		.cube-wrap {
			-webkit-perspective: 1800px;
			-webkit-perspective-origin: 0% 1000px;

			-moz-perspective: 1800px;
			-moz-perspective-origin: 0% 1000px;

			-ms-perspective: 1800px;
			-ms-perspective-origin: 0% 1000px;

			perspective: 1800px;
			perspective-origin: 0% 1000px;
		}

		.cube {
			position: relative;
			width: 152px;
			margin: 0 auto;
			
			-webkit-transform-style: preserve-3d;
			-webkit-animation: spin 20s infinite linear;
			
			-moz-transform-style: preserve-3d;
			-moz-animation: spin 20s infinite linear; 

			-ms-transform-style: preserve-3d;
			-ms-animation: spin 20s infinite linear; 

			transform-style: preserve-3d;
			animation: spin 20s infinite linear; 
		}

		.cube div {
			position: absolute;
			width: 152px;
			height: 202px;
			background: rgba(255,255,255,0.1);
			box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
			font-size: 20px;
			text-align: center;
			line-height: 200px;
			color: rgba(0,0,0,0.5);
			font-family: sans-serif;
			text-transform: uppercase;
		}

		/*************** DEPTH CUBE ***************/
		.depth div.back-pane {
			
			background: url("http://doggydish.com/PROJECTS/balloon-green-l.svg");
			
			-webkit-transform: translateZ(10px)...