JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class=container>
  <div class="tempimg">
    <img src="http://falconwood.us/wolfy/jordanjunk/joyceMay12.png">
  </div>

  <div class="parallaxContainer">
    <div class="floor">
      <div class="marbleL"></div>
      <div class="marbleR"></div>
    </div>
    <div class="sideBack">
      <div class="leftBackActFlare"></div>
      <div class="leftBackActSquareOuter">
        <div class="leftBackActSquareInner"></div>
      </div>
      <div class="leftBackCrown"></div>
      <div class="leftBackBase"></div>
      <div class="rightBackActFlare"></div>
      <div class="rightBackActSquareOuter">
        <div class="rightBackActSquareInner"></div>
      </div>
      <div class="rightBackCrown"></div>
      <div class="rightBackBase"></div>
    </div>
    <div class="midBack">
      <div class="midBackActualWall">
        <div class="midBackActSquareOuter">
          <div class="midBackActSquareInner"></div>
        </div>
      </div>
      <div class="midBackCrown">
        <div class="midBackCrownLeft"></div>
        <div class="midBackCrownMiddle"></div>
        <div class="midBackCrownMiddleTrans"></div>
        <div class="midBackCrownRight"></div>
      </div>
      <div class="midBackBase">
        <div class="midBackBaseLeft"></div>
        <div class="midBackBaseMiddleLeft"></div>
        <div class="midBackBaseMiddleRight"></div>
        <div class="midBackBaseRight"></div>
      </div>
    </div>
    <div class="rightSconce"></div>
    <div class="leftSconce"></div>
    <div class="fireplace"></div>
    <div class="fireplaceReflect"></div>
    <div class="leftChair"></div>
    <div class="rightChair"></div>
  </div>
</div>

CSS

body {
    margin: 0 !important;
}
.tempimg {
  overflow: hidden;
  position: absolute;
  display: none;
}

.tempimg > img {
  width: 100vw;
}

.parallaxContainer {
    overflow: hidden;
    width: 100%;
    display: block;
    height: 100%;
    position: absolute;
}

.floor {
    background: linear-gradient(to left, #a59b91 0%, #c8c4c1 50%, white 100%);
    bottom: 0;
    height: 20%;
    width: 100%;
    display: block;
    position: absolute;
    opacity: 1;
}
.marbleL {
    background: url(http://falconwood.us/wolfy/jordanjunk/marble.png);
    bottom: 0;
    height: calc(100% - 20px);
    width: 50%;
    display: block;
    position: absolute;
    opacity: 1;
}
.marbleR {
    background: url(http://falconwood.us/wolfy/jordanjunk/marble.png);
    bottom: 0;
    height: 100%;
    width: 50%;
    display: block;
    position: absolute;
    opacity: 1;
    right: 0;
    transform: scaleX(-1);
}

/* ------------------------------------ */
.sideBack {
    background: linear-gradient(to left, #978c8a 4%, #7e716b 26%, #c2bdc1 76%, #9a9496 100%);
    margin-top: 1%;
    height: 82%;
    width: 100%;
    display: block;
    position: absolute;
    opacity: 1;
    overflow: hidden;
}
.leftBackActFlare {
    position: absolute;
    display: block;
    width: 35%;
    height: 110%;
    margin-left: 5%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.3), transparent 60%);
    border-radius: 100%;
}
.leftBackActSquareOuter {
    box-shadow: inset 0 0 0px 30px rgba(148, 140, 142, 0.3);
    width: 800px;
    height: calc(100% - 190px);
    margin-left: calc(20% - 750px);
    margin-top: 110px;
    display: block;
    position: absolute;
}
.leftBackActSquareInner{
    box-shadow: inset 0 0 0px 10px rgba(148, 140, 142, 0.3);
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    margin: 40px;
    display: block;
    position: absolute;
}
.leftBackCrown {
  background-image: url('http://falconwood.us/wolfy/jordanjunk/lt.png');
  background-repeat: repeat;
 ...