JSFiddle - React, Tailwind, and code Playground

HTML

<h1>QUESTION</h1>
<p>The header text in the preceding h1 element is behind this
    paragraph's text (as expected), but on top of this paragraph's
    background and border (not expected).
</p>

CSS

h1 {
    font-size: 2em;
    font-family: Verdana;
    font-weight: bold;
}

p {
    border: 3px solid blue;
    margin-top: -1.5em;
    background-color: green;
    color: white;
}