JSFiddle - React, Tailwind, and code Playground

HTML

<div class="website-container">
      <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>

CSS

* {
  margin: 0;
  padding: 0;
}

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

.website-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  text-align: center;
}

.website-container::before,
.website-container .calltoaction {
  content: ' ';
  flex-basis: 100%;
}

.website-container .calltoaction {
  display: flex;
  align-items: center;
}

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

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

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