JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header>

      <ul class="nav">
        <li>Projects</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
      <div class="typewriter">
        <h1>Welcome to my portfolio.</h1>
      </div>
    </header>
    <main>

    </main>
  </body>

CSS

* {
  box-sizing: border-box;
}
html, body, main {
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: monospace;
  background-color: #06bace;
  color: white;
}
header {
  height: 100%;
}
main {
  background-color: black;
}
.typewriter h1{
  font-size: 2rem;
  white-space: nowrap;
  overflow: hidden;
  animation:
  type 1.8s steps(40, end);
}
.nav {
  padding: 0;
  display: flex;
  justify-content: center;
}
.typewriter {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  align-items: center;
}

@keyframes blink {
  from, to { border-color: transparent }
 50% { border-color: white; }
}
@keyframes type {
  from {
    width: 0;
  }
  to {
    width: 24ch;
  }
}

ul li{
  list-style: none;
  display: inline;
}