JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Hallo Welt</title>
  <style>

  </style>
</head>
<body>
  <header>
    <div class="homepage-name">Bäckerei Müller</div>
    <nav>
      <ul>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Über uns</a></li>
        <li><a href="#">Preisliste</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem cum, recusandae, nisi doloremque deserunt ducimus harum id inventore in sit molestias, consequuntur iure vitae eaque corporis dolor hic sequi tenetur debitis ipsa libero ipsum aperiam nam? Accusantium enim necessitatibus hic dolore dolores? Labore inventore sed, consequuntur rem amet mollitia quasi sint magnam nisi quam ipsa neque modi repellat. Maiores sequi impedit doloremque eligendi dolorem commodi ea laudantium temporibus? Earum, voluptate nulla commodi nam illo repellat quidem adipisci nesciunt optio modi, totam numquam, architecto quae blanditiis deleniti eos! Quaerat veniam veritatis laboriosam sit incidunt aspernatur natus et voluptatem commodi, impedit quo iure molestiae fuga. Officia, obcaecati libero magnam placeat ipsa eum sequi quia! Consequuntur sint possimus molestiae, natus suscipit excepturi ad atque tempore? Perspiciatis error laudantium quas ipsam maiores et, aliquam quidem deleniti, excepturi accusamus velit minus. Sequi necessitatibus molestias animi ad, culpa quam commodi quia quae laboriosam et nisi enim inventore magnam, iusto, sunt modi. Obcaecati id maiores veritatis, asperiores laborum eaque recusandae nisi dolore labore, quasi natus distinctio ducimus quis quaerat quod alias dicta? Laudantium voluptates dolore perferendis cumque itaque temporibus architecto reiciendis beatae accusantium debitis cupiditate quisquam quia, perspiciatis aliquid numquam molestiae voluptate saepe voluptas provident sint maxime consequuntur, sunt vitae ab!...

CSS

html, body {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
      min-height:100%;
      font-family: Arial;
      font-weight: bold
    }

    header {
      background-image: url(https://images.unsplash.com/photo-1608198093002-ad4e005484ec?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=4932&q=80);
      background-size: cover;
    }

    .homepage-name {
      text-align: center;
      font-size: 9vw;
      padding: 2vw 0 6vw;
    }

    nav {
      border-top: 1px solid #000;
      position: sticky;
      top: 0;
    }

    nav ul {
      display: flex;
      margin: 0;
    }

    nav li {
      display: flex;
      list-style-type: none;
      align-items: center;
      margin-right: 25px;
      font-size: 24px;
    }

    nav a {
      padding: 2rem 0;
      color: #000;
      font-weight: 700;
      text-decoration: none;
    }