JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="imgDelete"></div>

<div class="coverContainer">
<div class="backShapes">
  <div class="floorShape"></div>
  <div class="backWallShape"></div>
  <div class="midWallShape">
    <div class="midWallBigSquare"></div>
    <div class="midWallLilSquare"></div>
    
  </div>
</div>


</div>

CSS

.imgDelete {
  background: lightblue url("https://techstatic.org/junk/wholething.png") no-repeat;
  width: 1600px;
  height: 1100px;
  background-size: 1600px 1100px;
  position: absolute;
}

.backWallShape {
    position: absolute;
    margin-top: 20px;
    width: 1600px;
    height: 900px;
    background: linear-gradient(to left, #978c8a 4%, #7e716b 26%, #c2bdc1 76%, #9a9496 100%);
    opacity: .1;
}

.midWallShape {
  position: absolute;
  margin-left: 360px;
  width: 880px;
  height: 930px;
  background: linear-gradient(to right, #bfbbbc, #a99f9d);
  opacity: 1;
}

.midWallBigSquare {
    position: absolute;
    margin-top: 96px;
    margin-left: 40px;
    width: 720px;
    height: 666px;
    border: 40px solid black;
}

.midWallLilSquare {
    position: absolute;
    margin-top: 147px;
    margin-left: 89px;
    width: 680px;
    height: 625px;
    border: 10px solid black;
}

.floorShape {
    position: absolute;
    margin-top: 900px;
    width: 1600px;
    height: 200px;
    background: linear-gradient(to right, white, #c8c4c1, #a59b91);
    opacity: .1;
}

JavaScript

// floor	white 	c8c4c1	a59b91	
// backwall	978c8a 4%	7e716b 26%	c2bdc1 76%	9a9496 100
// middlewall	bfbbbc	a99f9d