JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mySec header">
  <div class="info">
    <ul id="headList">
      <li>
        <a data-section="top-left" id="link" href="#">ABOUT</a>
      </li>
      <li>
        <a data-section="getInvolved" id="link" href="#">CLASSES</a>
      </li>
      <li>
        <a data-section="footer" id="link" href="#">CONTACT</a>
      </li>
    </ul>
    <h1 class="title">Niki Gibbs Modern Pilates</h1>
    <p class="title2">Working From The Inside Out.</p>
    <img id="pilLogo" src="pilatesLog.png">
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: 'Josefin Sans', sans-serif;
  background-color: #EFEFEF;
  text-align: center;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.mySec {
  display: block;
  position: relative;
  height: calc(95vh);
  width: calc(96vw - 1vh);
  transform: translate(calc((4vw + 1vh) / 2), 2.5vh);
  overflow: hidden;
}

.header {
  background: red;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#FFC0CB, #9370DB);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#FFC0CB, #9370DB);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#FFC0CB, #9370DB);
  /* For Firefox 3.6 to 15 */
}

#headList {
  list-style: none;
  font-family: 'Josefin Sans', sans-serif;
  position: relative;
  left: -1vw;
}

#headList li {
  display: inline;
}

#headList li a {
  color: #000;
  font-size: 1.4vw;
  padding: 2vw;
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: 200;
}

.title {
  font-family: 'Amatic SC', cursive;
  font-size: 8vw;
  position: relative;
  bottom: 8.3vh;
  color: #000;
}

.title2 {
  color: #000;
  position: relative;
  font-size: 2vw;
  bottom: 14vh;
}

#pilLogo {
  position: relative;
  left: 25vw;
  bottom: 41vh;
}

.info {
  position: relative;
  top: 25vh;
}