JSFiddle - React, Tailwind, and code Playground

by kazabr

HTML

<article class="container">
    <selection class="stage">
        <div class="shadow"></div>
        <div class="back-left"></div>
        <div class="back-right"></div>
        <div class="platform-left"></div>
        <div class="platform-right"></div>
        <div class="pit-left"></div>
        <div class="pit-right"></div>
        <div class="pit-back"></div>
    </selection>
</article>

SCSS

article.container {
    perspective: 2600px;
}

.container {
    perspective-origin: 50% -1400px;
}

.stage div {
    position: absolute;
    transform-style: preserve-3d;
}

.stage .back-left {
    width: 500px;
    height: 120px;
    background-color: #6b522b;
    transform: rotateY(90deg) translateX(-256px);
    border-top: 6px solid #8a683d;
    border-left: 6px solid #574625;
}
.stage .back-right {
    width: 446px;
    height: 120px;
    background-color: #9c7442;
    transform: translateX(253px) translateZ(3px);
    border-top: 6px solid #b5854a;
    border-right: 6px solid #78552c;
}
.stage .platform-left {
    width: 446px;
    height: 220px;
    background-color: #bcb3a8;
    transform: rotateX(90deg) translateY(396px) translateX(253px) translateZ(-13px);
    border-bottom: 6px solid #857964;    
}
.stage .platform-right {
    width: 446px;
    height: 164px;
    background-color: #bcb3a8;
    transform: rotate(90deg) translateY(88px) translateX(253px) translateZ(-41px);
    border-right: 6px solid #554c3d;
    border-bottom: 6px solid #847660;
}
.stage .pit-left {
    width: 447px;
    height: 800px;
    background-color: #4d4233;
    transform: translate3D(254px, 125px, 285px);
}
.stage .platform-right {
    width: 446px;
    height: 164px;
    background-color: #bcb3a8;
    transform: rotateX(90deg) translateY(88px) translateX(253px) translateZ(-41px);
    border-right: 6px solid #554c3d;
    border-bottom: 6px solid #847660;
}
.stage .pit-left {
    width: 447px;
    height: 800px;
    background-color: #4d4233;
    transform: translate3D(254px, 125px, 285px);
}
.stage .pit-right {
    width: 451px;
    height: 800px;
    top: -1400px;
    background-color: #847660;
    transform: translate3D(254px, 125px, 173px);
}
.stage .pit-back {
    width: 170px;
    height: 220px;
    background-color: #6b522b;
    transform: rotateY(90deg) translate3D(-200px, 87px, 168px);
}