JSFiddle - React, Tailwind, and code Playground

HTML

<header id="home">
    <div class="container">
      <div class="row banner" style="margin-top: 0px;">
        <div class="banner-text">
          <h1 class="responsive-headline wow zoomIn animated" style="font-size: 72px; visibility: visible; animation-name: zoomIn;">I'm <span>Alyssa Reyes</span></h1>
          <h3 class="wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">I'm a passionate <span>Web Designer</span> and <span>Developer</span> creating modern and responsive design for <span>Web</span> and <span>Mobile</span>. <br> Let's start and learn more <a href="#about" class="smoothscroll">about me</a>.</h3>
          <hr>
        </div>
      </div>
    </div>
</header>

CSS

.banner-text {
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) }