JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ProjectTitle">
  <div class="flex-container">
      <p>
      Project Title
      </p>
  </div>
</div>

CSS

.ProjectTitle {
  background-color: green;
  position: absolute;
  width: 100%;
  height: 20%;
  bottom: 0;
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Taviraj", serif;
  color: #000;
  letter-spacing: 0.11em;
  line-height: 20%;
  height: 100%;
}

.flex-container p {
  vertical-align: middle;
}