JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    Foreground
</header>

CSS

header { 
    background: yellow;
    position:relative;
    height: 100px;
    width: 100px;
    z-index:30; /* Remove The z-index here and it works :-S */
}

header::before { 
    content:"Hide you behind!";
    background: red;
    position:absolute;
    height: 100px;
    width: 100px;
    top:25px;
    left:25px;
    z-index:-1;
}