JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <div id="mask">
        <div id="page">
        </div>
    </div>

</body>

CSS

#mask {
            background-color: red;
            opacity: 0.4;
            width: 400px;
            height: 500px;
            -webkit-transform-origin: 0% 0%;
            -webkit-transform: rotate(45deg) translate(100px, 100px);
        }
        
        #page {
            background-color: blue;
            opacity: 0.4;
            width: 200px;
            height: 300px;
            position: fixed;
            top: 0;
            left: 0;
            -webkit-transform-origin: 0% 0%;
           /*-webkit-transform: translate(-100px, -100px) rotate(-45deg) ;*/

        }