JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
    <div id="container">
        <div class="box1">I'm a red box</div>
    </div>
</div>

CSS

#page {
    width: 1000px;
    height: 1000px;
    background-color: rgba(255,255,255,.25);
}

#container {
    /*
    position: absolute;
    top: 25%;
    left: 25%;
    */
}

.box1 {
    width: 200px;
    height: 100px;
    padding: 25px;
    background-color: red;
    position: relative;
    -webkit-transform:translateZ(0);
}

.box1::before {
    position: absolute;
    bottom: -10px;
    width: 55%;
    height: 50px;
    padding: 5px;
    background-color: green;
    content: "i belong BEHIND the red box.";
    z-index: -1;
}