JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="stage">

<div class="runway runway-a10"></div>
<div class="runway runway-b10"></div>
<div class="runway runway-c10"></div>
<div class="runway runway-a9"></div>
<div class="runway runway-b9"></div>
<div class="runway runway-c9"></div>
<div class="runway runway-a8"></div>
<div class="runway runway-b8"></div>
<div class="runway runway-c8"></div>
<div class="runway runway-a7"></div>
<div class="runway runway-b7"></div>
<div class="runway runway-c7"></div>
<div class="runway runway-a6"></div>
<div class="runway runway-b6"></div>
<div class="runway runway-c6"></div>
<div class="runway runway-a5"></div>
<div class="runway runway-b5"></div>
<div class="runway runway-c5"></div>

<div class="runway runway-a4"></div>
<div class="runway runway-b4"></div>
<div class="runway runway-c4"></div>

<div class="runway runway-a3"></div>
<div class="runway runway-b3"></div>
<div class="runway runway-c3"></div>

<div class="runway runway-a2"></div>
<div class="runway runway-b2"></div>
<div class="runway runway-c2"></div>

<div class="runway runway-a1"></div>
<div class="runway runway-b1"></div>
<div class="runway runway-c1"></div>

</div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  background-color:#000;
  perspective:500px;
  perspective-origin:50% 20%;
}
.stage{
  width:0px;
  height:0px;
  top:50%;
  left:50%;
  position:absolute;
  transform-style:preserve-3d;
  animation: runway infinite 7s ease-in;
}
@keyframes runway{
  0% { transform:translateZ(0px); }
  100% { transform:translateZ(11500px); }
}
.runway{
  width:500px;
  height:500px;
  transform:rotateX(90deg) translateY(200px) scaleX(5) scaleY(5) scaleZ(5);
  top:50%;
  left:50%;
  position:absolute;
  margin-left:-250px;
  margin-top:-50px;
  background-color:#333;
  backface-visibility:hidden;
  transform-style:preserve-3d;
  background-image:url(https://www.filterforge.com/filters/10766.jpg);
}
.runway:before{
  position:absolute;
  left:0px;
  top:26px;
  right:0px;
  content:"";
  display:block;
  height:30px;
  background-color:#666;
  background-image:url(https://static.turbosquid.com/Preview/2014/08/01__14_44_38/panel%20011.jpgbd7970ff-a1e8-4a41-b2b6-e62835fb1b61Larger.jpg);
  background-position:right bottom;
  transform:rotateX(-30deg);
  transform-origin:50% 100%;
  z-index:100;
}
.runway:after{
  position:absolute;
  left:0px;
  top:0px;
  right:0px;
  content:"";
  display:block;
  height:30px;
  background-color:#999;
  background-image:url(https://static.turbosquid.com/Preview/2014/08/01__14_44_38/panel%20011.jpgbd7970ff-a1e8-4a41-b2b6-e62835fb1b61Larger.jpg);
  transform:translateZ(15px);
  transform-origin:50% 100%;
  z-index:100;
}
.runway-a1{
  transform:translateZ(0px) rotateX(90deg) translateY(200px) scaleX(5) scaleY(5) scaleZ(5);
  background-image:url(https://s-media-cache-ak0.pinimg.com/originals/d7/8d/40/d78d4069da54ade6085b7d540cfde597.jpg);
  background-size:cover;
}
.runway-a2{
  transform:translateZ(-2500px) translateY(200px) rotateX(90deg) scaleX(5) scaleY(5) scaleZ(5);
  background-image:url(https://s-media-cache-ak0.pinimg.com/originals/d7/8d/40/d78d4069da54ade6085b7d540cfde597.jpg);
 ...