JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="header"></div>
    <div class="content"></div>
</div>

<div class="container-f">
    <div class="header-f"></div>
    <div class="content-f"></div>
</div>

CSS

.container {  border: 3px solid #000; height: 500px; width: 300px; }
.header { background: yellow; height: 100px; width: 100%; }
.content { background: red; height: 100%; width: 100%; }

.container-f { border: 3px solid #000; height: 500px; width: 300px; }
.header-f { position: relative; background: yellow; height: 100px; width: 100%; z-index: 1; }
.content-f { position: relative; background: red; height: 100%; width: 100%; margin-top: -100px; z-index: 0; }

.container, .container-f { position: relative; float: left; margin-right: 20px; }