JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <h1 class="title">THE TITLE</h1>
    <div class="content">
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolor doloremque consectetur nam fugit nostrum facilis delectus corrupti adipisci sit perferendis suscipit deleniti beatae nobis officia impedit eius soluta eum?
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolor doloremque consectetur nam fugit nostrum facilis delectus corrupti adipisci sit perferendis suscipit deleniti beatae nobis officia impedit eius soluta eum?
        </p>
    
    </div>
</div>

<div class="wrapper2">
    <h1 class="title">THE TITLE</h1>
    <div class="content">
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolor doloremque consectetur nam fugit nostrum facilis delectus corrupti adipisci sit perferendis suscipit deleniti beatae nobis officia impedit eius soluta eum?
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolor doloremque consectetur nam fugit nostrum facilis delectus corrupti adipisci sit perferendis suscipit deleniti beatae nobis officia impedit eius soluta eum?
        </p>
    
    </div>
</div>

CSS

@-webkit-keyframes slide
{
    0% {top: 0%;}
    100%   {top: -10em;}
    
    
}
@-moz-keyframes slide
{
    0% {top: 0%;}
    100%   {top: -10em;}

}

@keyframes slide
{
    
    0% {top: 0%;}
    100%   {top: -10em;}
    
}



@-webkit-keyframes slide2
{
    0% {top: 0%;}
    100%   {top: -120%;}
    
    
}
@-moz-keyframes slide2
{
    0% {top: 0%;}
    100%   {top: -120%;}

}

@keyframes slide2
{
    
    0% {top: 0%;}
    100%   {top: -120%;}
    
}



.wrapper, .wrapper2 {
    position:relative;
    overflow:hidden;
    display:block;
}

.title {
    position:relative;
    background:red;
    color:white;
     z-index:10;   
    margin-top:0px;
}

.content {
    position:relative;
    z-index: 0;

    -webkit-animation: slide 15s ease-out infinite;
       -moz-animation: slide 15s ease-out infinite;
            animation: slide 15s ease-out infinite; 
}


.wrapper2 .content {

    -webkit-animation: slide2 15s ease-out infinite;
       -moz-animation: slide2 15s ease-out infinite;
            animation: slide2 15s ease-out infinite; 
}