JSFiddle - React, Tailwind, and code Playground

HTML

<p>Why is my image not showing up?</p>
<header>
  <section id="header-banner">
  </section>
</header>
 <p>content after image</p>

CSS

header {
    height: 100vh;
    max-height: 850px;
}

#header-banner {
    color: #fff;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(https://unsplash.com/?photo=gzH1qxPLXtA) center center no-repeat;
    background-size: cover;
    position: relative;
}