JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="scene3D">
			<div id="iphone">
				<div class="box">
					<div class="speak">
						<div class="point"></div>						
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>						
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div class="point"></div>
						<div...

CSS

* {
				-webkit-transform-style: preserve-3d;
			}
			#scene3D {
				width: 500px;
				height: 254px;
				margin: 300px auto 0;
				-webkit-perspective: 1200;				
			}
			#iphone {				
				-webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg);
				/*-webkit-transform: rotateX(85deg) rotateY(0deg) rotateZ(-180deg);*/
				-webkit-animation: rotateiphone 15s infinite linear;
			}
			@-webkit-keyframes rotateiphone {
				0% { 
					-webkit-transform: rotateX(45deg ) rotateY(0deg ) rotateZ(-45deg );
				}
				100% {
					-webkit-transform: rotateX(405deg ) rotateY(360deg ) rotateZ(315deg );
				}
			}
			.alu > div, .box > div {
				position: absolute;
				-webkit-transform-origin: 0 0 0;
			}
			.top, .bottom {				
				width: 500px;
				height: 254px;
				background: #f9f9f9;
				background: -moz-linear-gradient(left,  #f9f9f9 0%, #ffffff 100%);
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f9f9f9), color-stop(100%,#ffffff));
				background: -webkit-linear-gradient(left,  #f9f9f9 0%,#ffffff 100%);
				background: -o-linear-gradient(left,  #f9f9f9 0%,#ffffff 100%);
				background: -ms-linear-gradient(left,  #f9f9f9 0%,#ffffff 100%);
				background: linear-gradient(to right,  #f9f9f9 0%,#ffffff 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ffffff',GradientType=1 );
				border-radius: 20px;				
			}
			.top.fake {
				width: 398px;
				height: 198px;
				background: #70716c;
				-webkit-transform: translateX(1px) translateY(1px) translateZ(-1px);
			}
			.bottom {		
				background: #808080;
				background: -moz-linear-gradient(left,  #808080 0%, #a3a3a3 100%);
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#808080), color-stop(100%,#a3a3a3));
				background: -webkit-linear-gradient(left,  #808080 0%,#a3a3a3 100%);
				background: -o-linear-gradient(left,  #808080 0%,#a3a3a3 100%);
				background: -ms-linear-gradient(left,  #808080 0%,#a3a3a3...