JSFiddle - React, Tailwind, and code Playground

HTML

<div class="website-container">
  <header class="header">
    <div class="container-fluid">
      <div class="space"></div>
      <div class="title">
        <h1>Heading text here</h1>
        <h2>Slogan text here</h2>
      </div>
      <div class="calltoaction">
        <button type="submit" style="--primary-button">button</button>
      </div>
    </div>
  </header>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

*,
*:after,
*:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.website-container {
  display: grid;
  grid-gap: 0rem;
  grid-template-columns: repeat(1fr);
}

.website-container>* {
  position: relative;
  display: flex;
  height: 100vh;
}

h1 {
  font-weight: 600;
  font-size: 4vw;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
}

button {
  --padding: 1.1em;
  color: black;
  font: inherit;
  background: none;
  padding: 1rem calc(1rem * 2);
  border: 2px solid black;
  border-radius: 2px;
}

.calltoaction {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
}

button:hover {
  color: black;
  background: red;
}