JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <audio src='{audio}'></audio>
    <body>
        <div class="follower-container">
            <div class="left-square-container">
                    <div class="icon">
                       <img class="image" src="{image}" />
                    </div>
            </div>
  		
            <div class="right-retangle-container">
                <div class="text">
                    <div class="text-animation">
                        New Follower <span class='keyword name'>{name}</span></div>
                    </div>
  		        </div>
  		    </div>
       </div> 
	</body>
</html>

CSS

@keyframes slideInFromAbove 
{
    0% {transform: translateY(-100%);}
    6% {transform: translateY(0);}
    98% {transform: translateY(0);}
    100% {transform: translateY(-100%);}
}

@keyframes slideInFromTheLeft 
{
    0% {opacity: 1;
        transform: translateX(-100%);}
        
    4.4% {opacity: 1;
          transform: translateX(0);}
          
    97% {opacity: 1;
        transform: translateX(0);}
        
    100% {opacity: 0;
          transform: translateX(-100%);}
}

@keyframes slideInFromBelow 
{
    0% {transform: translateY(100%);}
    100% {transform: translateY(0);}
}
 
@keyframes slideInFromTheLeft-Text 
{
    0% {transform: translateX(100%);}
    100% {transform: translateX(0);}
} 

.follower-container
{
    display: flex;
    font-family: 'Roboto';
    position: absolute;
    overflow: hidden; /*hide elements when they overflow*/
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.left-square-container
{
    width: 100px;
    height: 100px;
    background: #0d47a1;
    position: relative;
    display: inline-block;
    float: left;
    z-index: 1;
    transform: translateX(-100%);
    animation: 9.6s 1 slideInFromAbove;/* timing (.4s duration + 8s hold + .4s removal of self + animation of right + removal of right) */
     -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-fill-mode: forwards;
}

.icon img /*THIS IS THE DIV TO CHANGE THE IMAGE ALIGNMENT*/
{
    display: block;
    margin: 0 auto;
    webkit-filter: drop-shadow(1px 1px 1px #212121);
    filter: drop-shadow(1px 1px 1px #212121);
}


.right-retangle-container
{
    width: 400px;
    height: 100px;
    opacity: 0;
    background: #292929;
    border-top: 5px solid #0d47a1;
    box-sizing: border-box;
    display: inline-block;
    float: left;
    position: relative; /* needed for z-index*/
    z-index: 0; /*place under left square*/
    transform: translateX(-100%);
    animation: 8.8s .6s 1 slideInFromTheLeft;/* timing...