JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <header>
    <p>En-tête</p>
  </header>

  <main>
    <p>Contenu</p>
  </main>
</body>

CSS

html,
body {
  margin: 0;
}

body {
	display: flex;
  flex-direction: column; /* verticalement */
	justify-content: space-between; /* axe principal = VERTICAL */
	min-height: 100vh;
  color: white;
	background: #161623;
  outline: 1px dashed white;
  outline-offset: -1px;
}

header,
main {
  padding: 1rem;
  text-align: center; /* centrage horizontal */
  outline: 1px dotted yellow;
}

main {
  flex-grow: 1; /* ce flex item prend toute la place disponible */
  display: flex; /* et en même tempsⓒ c'est un flex container */
  justify-content: center;
  align-items: center;
  background-color: darkslateblue;
}