<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div class="container mx-auto">
    <header class="flex justify-between items-center">
      <h1>Text</h1>
      <nav>
        <ul class="list-none flex gap-x-4">
          <li><a href="#">Text</a></li>
          <li><a href="#">Text</a></li>
          <li><a href="#">Text</a></li>
        </ul>
      </nav>
    </header>
  </div>
</body>

</html>
.container {
  max-width: 1024px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.justify-between {
  justify-content: space-between;
}

.list-none {
  list-style-type: none;
}

.gap-x-4 {
  column-gap: 1rem;
}

.items-center {
  align-items: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.