JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">
  <div id="div2" class="child">
    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub">
      <ul class="list">
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
  </div>
</div>

CSS

.sub {
  height: 20px;
  width: 50px;
  background-color: black;
}

.list {
  width: 200px;
  height: 10px;
  background-color: yellow;
  -moz-transform: translateZ(-1em);
  -webkit-transform: translateZ(-1em);
}

#div1 {
  position: relative;
  height: 150px;
  width: 200px;
  -webkit-transform: perspective(150px);
  -moz-transform: perspective(150px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
}

.child {
  padding: 50px;
  position: absolute;
}

#div2 {
  background-color: red;
  height: 70px;
  width: 80px;
  -moz-transform: translateZ(10px);
  -webkit-transform: translateZ(10px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
}