JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" id="btn">Click</button>

<div class="stillObj"></div>

<div id="outer">
   <div class="inner">
      <div>
         <div class="item"></div>   
      </div>
        <div class="itemBelow">
            <div class="innerBelow"></div>
        </div> 
   </div>
</div>

CSS

.stillObj{
    height: 450px;
    width: 30px;
    background: yellow;
    z-index:2;/*to be second height div*/
    position: relative;
}
#outer{ /*parent and children - rotateable*/
  top:10px;
  width:220px;
  height:50px;
  position: absolute;
  background:blue;
}
.inner{
  top:35px;
  width:200px;
  height:75px;
  position: relative;
  background:green;
}
.item{
  top:60px;
  width:180px;
  height:100px;
  position: absolute;
  z-index: 4; /*to be top most div*/
  display: block;
  background:red;
}
.itemBelow{
  top:160px;
  width:160px;
  height:120px;
  position: relative;
  background:pink;
}
.innerBelow{
  top: 105px;
  width:140px;
  height:140px;
  position: relative;
  display: block;
  z-index: 1; /*to be lowest div*/
  background:lime;
}
#btn{
    margin-bottom: 50px;
    float: right;
    width: 200px;
    height: 60px;
}

.rotate {
  -webkit-transform: rotateZ(15deg);
        transform: rotateZ(15deg);
}

.item, .stillObj {
     -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

JavaScript

$('#btn').click(function(){
	$('.item').toggleClass('rotate');
});
/*how do I rotate #outer and still maintain the default z-indexes ?*/