JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class=" viewport">
  <div class="vrcontent">


<div class="cockpit">
      <div class="cockpit-floor"></div>
      <div class="cockpit-wall-left"></div>
      <div class="cockpit-wall-right"></div>
      <div class="cockpit-wing-left"></div>
      <div class="cockpit-wing-right"></div>
      <div class="cockpit-wing-left-lower"></div>
      <div class="cockpit-wing-right-lower"></div>
      <div class="cockpit-light-left"></div>
      <div class="cockpit-light-top"></div>
      <div class="cockpit-light-right"></div>
      <div class="cockpit-light-bottom"></div>
      <div class="cockpit-base"></div>
      <div class="cockpit-base-top"></div>
      <div class="cockpit-base-roof"></div>
      <div class="cockpit-base-back"></div>
      <div class="cockpit-joystick">
      	<div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="detail"></div>
      </div>
      <div class="cockpit-pitch">
      	<div class="cockpit-pitch-meter"></div>
      </div>
      <div class="cockpit-compass">
      	<div class="cockpit-compass-needle"></div>
      </div>
      <div class="cockpit-speedometer"></div>
      <div class="cockpit-crosshairs"></div>
      <div class="cockpit-targeting"></div>
      
    
    
    
    <!-- start monitors -->
    <div class="monitor">
        <div class="monitor-screen">
          <canvas id="monitorcanvas-left" width="400" height="240"></canvas>
          <video id="monitorvideo" controls width="360" height="200">
            <source src="video/shiprotation1.mp4" loop type="video/mp4">
          </video>
          <span class="mission-name">MISSION NAME</span>
          <span class="mission-description">Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
          <span class="mission-hint">Commodo Justo Pellentesque Pharetra</span>
        </div>
        <div class="monitor-back"></div>
        <div...

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto');
html,body{
  background-color:#000;
  height:100%;
  margin:0px;
}
.vrcontent{
	transform-style:preserve-3d;
	position:absolute;
	width:0px;
	height:0px;
	left:50%;
	top:50%;
	transform-origin: 50% 50% 300px;
  transform-style:preserve-3d;
  transform:rotateX(-30deg) translateY(-600px);
}
@keyframes preview{
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.viewport-left{
	position:fixed;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	overflow:hidden;
	perspective:300px;
	perspective-origin: 50% 50%;
	transition:all 1s ease-in-out;
	backface-visibility:hidden;
	background-color:#000;
}




.cockpit{
  width:600px;
  height:634px;
  top:50%;
  left:50%;
  margin-left:-300px;
  margin-top:-300px;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  position:fixed;
  pointer-events:none;
  z-index:999999999999999999999999999999;
  transform-style:preserve-3d;
  transition:all 1.5s ease-in-out;
  transform-origin: 50% 50% 300px;
  transform: translateZ(1000px)  translateY(00px) rotateY(-90deg) rotateZ(40deg);
  animation: shipspin infinite linear 5s; 
}
@keyframes shipspin{
  0% { transform: translateZ(1000px)  translateY(00px) rotateY(0deg); }
  100% { transform: translateZ(1000px)  translateY(00px) rotateY(360deg); }
  
}
.cockpit.ready{
	transform: translateZ(0px);
}
.cockpit.turbulance{
	animation: turbulance 1 2s ease-out;
}
@keyframes turbulance{
	0% { transform: translateZ(0px) rotateZ(0deg); }
	5% { transform: translateZ(10px) rotateZ(-3deg); }
	10% { transform: translateZ(15px) rotateZ(2deg); }
	20% { transform: translateZ(5px) rotateZ(-3deg); }
	30% { transform: translateZ(10px) rotateZ(1deg); }
	45% { transform: translateZ(5px) rotateZ(-3deg); }
	60% { transform: translateZ(15px) rotateZ(2deg); }
	70% { transform: translateZ(5px) rotateZ(-3deg); }
	75% { transform: translateZ(10px) rotateZ(1deg); }
	100% { transform:...