JSFiddle - React, Tailwind, and code Playground

by nodpekar

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.1/css/all.min.css">
<div id="welcome-section">
  <div id="overlay">
    <h1>Portfolio Page</h1>
    <div id="navbar">
      <div class="navbar-items">
        <p>Projects</p>
        <span><i class="fas fa-angle-down"></i></span>
      </div>
      <div class="navbar-items">
        <p>Blog</p>
        <span><i class="fas fa-angle-down"></i></span>
      </div>
      <div class="navbar-items">
        <p>Resume</p>
        <span><i class="fas fa-angle-down"></i></span>
      </div>
    </div>
  </div>
</div>

CSS

body,
html {
  height: 100%;
  margin: 0;
}

#welcome-section {
  position: relative;
  background: url("https://tinyurl.com/y2keqge9") no-repeat fixed center;
  height: 100%;
  width: 100%;
  color: white;
  font-size: 24px;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);

}

#navbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.navbar-items {
  display: inline-grid;
  grid-template-rows: 1fr;
  align-items: center;
  justify-content: center;
}