JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
  <div id="titleContainer" class="titleLayer">
    <div id="upperTitle" class="speedInLeft">
      <span class="openSansCondensedLight fontBlack size5">Quick Loan</span>
    </div>
    <div id="lowerTitle" class="speedInRight">
      <span class="openSansCondensedLight fontBlack size5">Connect</span>
    </div>
  </div>
</div>

CSS

#parent {
  width: 1000px;
  height: 600px;
  border: 1px solid;
}

.titleLayer {
  position: absolute;
  z-index: 14;
}

#titleContainer {
  position: relative;
  height: 100%;
}

#upperTitle {
  position: absolute;
  width: 50%;
  height: 15%;
  top: 35%;
  left: 25%;
  text-align: center;
}

#lowerTitle {
  position: absolute;
  width: 50%;
  height: 15%;
  bottom: 35%;
  right: 25%;
  text-align: center;
}

/* w3schools, animations; Chrome, Safari, Opera */
@-webkit-keyframes speedInLeft {
  0% {
  opacity: 0;

  -webkit-transform: translate3d(-500%, -50%, 0) skewX(-30deg);
  }

  60% {
  opacity: 1;

  -webkit-transform: translate3d(-100%, -50%, 0) skewX(20deg);
  }

  80% {
  -webkit-transform: translate3d(-50%, -50%, 0) skewX(-5deg);
  }

  100% {
  -webkit-transform: none;
  }
}

/* w3schools, animations; Internet Explorer, Standard syntax */
@keyframes speedInLeft {
  0% {
  opacity: 0;

  -webkit-transform: translate3d(-500%, -50%, 0) skewX(-30deg);
  }

  60% {
  opacity: 1;

  -webkit-transform: translate3d(-100%, -50%, 0) skewX(20deg);
  }

  80% {
  -webkit-transform: translate3d(-50%, -50%, 0) skewX(-5deg);
  }

  100% {
  -webkit-transform: none;
  }
}

/* w3schools, animations; Chrome, Safari, Opera */
@-webkit-keyframes speedInRight {
  0% {
  opacity: 0;

  transform: translate3d(950%, -50%, 0) skewX(30deg);
  }

  60% {
  opacity: 1;

  transform: translate3d(200%, -50%, 0) skewX(-20deg);
  }

  80% {
  transform: translate3d(-50%, -50%, 0) skewX(5deg);
  }

  100% {
  transform: none;
  }
}

/* w3schools, animations; Internet Explorer, Standard syntax */
@keyframes speedInRight {
  0% {
  opacity: 0;

  transform: translate3d(950%, -50%, 0) skewX(30deg);
  }

  60% {
  opacity: 1;

  transform: translate3d(200%, -50%, 0) skewX(-20deg);
  }

  80% {
  transform: translate3d(-50%, -50%, 0) skewX(5deg);
  }

  100% {
  transform: none;
  }
}

.speedInLeft {
  /* Chrome, Safari, Opera */
  -webkit-animation: speedInLeft 1.5s ease-in-out;
 ...