JSFiddle - React, Tailwind, and code Playground

by bradleytrager

HTML

<div id="container">
    <div class="sheet" id='sheet1'></div>
    <div class="sheet" id='sheet2'></div>
    <div class="sheet" id='sheet3'></div>
</div>

CSS

.container {
    width:300px;
    margin:0 auto;
    position:relative;
    z-index:10;
}

.sheet{
    position:absolute; 
    width:150px;
    height:150px;
    border:1px solid brown;
    background:red;
        
}

#sheet1{
    z-index:7;
    top:5px;
    left:5px;
    background:blue;
    }

#sheet2{
    z-index:8;
    top:10px;
    left:10px;
    background:green;
    transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
    }

#sheet3{
    z-index:9;
    top:15px;
    left:15px;
    transform:rotate(14deg);
-ms-transform:rotate(14deg); /* IE 9 */
-webkit-transform:rotate(14deg); /* Opera, Chrome, and Safari */
    }