JSFiddle - React, Tailwind, and code Playground

HTML

<div class="intro">
  <header class="header container">
    <nav class="nav">
      <ul class="nav__list">
        <li><a class="nav__link" href="">link</a></li>
        <li><a class="nav__link" href="">link</a></li>
        <li><a class="nav__link" href="">link</a></li>
        <li><a class="nav__link" href="">link</a></li>
      </ul>
    </nav>
    <button class="burger">☰</button>
  </header>
  <div class="intro__text container">
    <p>Creative Template</p>
    <h1 class="intro__title">
      WELCOME
    </h1>
  </div>

</div>
<section class="some-section container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis accusantium sunt, voluptatem magnam magni quis architecto placeat, iusto incidunt unde aut doloremque fugit nesciunt temporibus dolor sint, provident expedita enim repudiandae? Minus, a, tempore dolorem iure, neque perferendis excepturi hic enim consequuntur voluptate quod. Soluta aut, neque numquam. Qui, sunt.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, consequuntur? Sapiente voluptatem, ipsam recusandae aut placeat molestiae quas, iusto nam!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ipsum quod quisquam possimus sapiente optio pariatur molestiae dolorum quasi eum iure quo nisi earum incidunt consequatur facilis non distinctio ratione vel mollitia laboriosam, obcaecati impedit modi. Adipisci, impedit, excepturi iste quod architecto, est eos facilis numquam neque in, tenetur. Officiis perspiciatis dolor id et nisi, maiores debitis soluta quae, a eaque eum eius expedita ipsam iusto ipsa corporis aliquam dignissimos non provident aut asperiores. Modi alias voluptates cumque, aliquid nesciunt.</p>

</section>

CSS

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Neucha', cursive;
}

.container {
  max-width: 500px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
}

.intro {
  min-height: 700px;
  background: url(https://wmpics.pics/di-NUHU.jpg) top center / cover;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.nav__link {
  display: block;
  padding: 1em;
}

.intro__text {
  padding: 120px 0;
  text-align: center;
  color: #fff;
}

.intro__title {
  font-size: 50px;
}