JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image-wrapper">
  <a href="home.html">
    <img src="http://japesfawcett.com/testsh/images/landing_logo2.png" />
  </a>

  <div id="test">
    <p>enter the sunshine state</p>
  </div>
</div>

CSS

@font-face {
    font-family: segoe;
    src: url(fonts/segoesc.ttf);
}

div.image-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.image-wrapper img {
  display: block;
}

#test {
  position: absolute;
  top: 100%;
  width: 100%;
}

#test p {
  width: 100%;
  font-family: segoe;
  font-size: 18px;
  text-align: center;
  color: #000;
  margin-top: -40px;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

JavaScript

function type() {
    var el = document.getElementById('test').querySelector(' p');
    var slogan = el.innerHTML;
    el.innerHTML = '';
    var i = 0;
    setInterval(function() {
        var char = slogan.substr(i, 1);
        el.innerHTML += char;
        i++;
    }, 250);
}
type();