JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <h1>My Website</h1>
</header>
<main>
  <section>
    <h2>Heading Title</h2>
    <article>
      <p>
      Blah blah blah<br>
      Blah blah blah<br>
      Blah blah blah
      </p>
      <p>
      Blah blah blah<br>
      Blah blah blah<br>
      Blah blah blah
      </p>
      <p>
      Blah blah blah<br>
      Blah blah blah<br>
      Blah blah blah
      </p>
    </article>
  </section>
</main>

CSS

* {
  position: relative;
            box-sizing: border-box;
       -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0;
    padding: 0;
}
*::before, *::after {
            box-sizing: border-box;
       -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden
}
header {
  width: 100%;
  height: calc(100vw / (1920 / 800));
  background-image: url('http://via.placeholder.com/1920x800');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
header > h1 { text-align: center; font-size: 4vw }
main { width: 100%; height: auto }
section { background-color: red }
section > h2 { text-align: center; font-size: 3vw }
section > article { display: flex }
section > article > p { margin: 2vw auto; font-size: 2vw }