JSFiddle - React, Tailwind, and code Playground

HTML

<header></header>
<div class="headerblock"></div>
<p>Empty text</p>

<!-- I want the "empty text" part to go *below* the header, not under it -->

CSS

body {
    margin: 0;
    padding: 0;
}

header {
    display: block;
    height: 100px;
    width: 100%;
    background: rgba(10, 10, 10, .3);
    position: fixed;
    top: 0;
}

.headerblock {
    height: 100px;
}