JSFiddle - React, Tailwind, and code Playground

by Jesse M

HTML

<div id="div1">
  <div id="div2">DIV2</div>
</div>

CSS

#div1 {
    position: relative;
    height: 130px;
    width: 130px;
    margin:300px auto 0 auto;
    -webkit-perspective: 2px;
    perspective: 2px;
}

#div2, #div4 {
    padding: 50px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
    background: rgba(100,100,100,0.5); 
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(45deg);
    transform-style: preserve-3d;
    transform: rotateX(45deg);
}