JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
	    <title>GR412 Twitch Follower Alert</title>
		<link href="Twitch\followeralert.css" rel="stylesheet" type="text/css" media="screen"/>
    </head>	   
	<body>
	    <div class="follower-container">
		
		    <div class="left-square-container">

			</div>
			
			<div class="right-retangle-container">
			
			    <div class="header">
			       <span class='keyword name'>{name}</span> is now following you!								   
				</div>
				
			</div>
					 			  
		</div>
	   	   
	</body>
	   
</html>

CSS

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

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

@keyframes slideInFromBelow {
    0% {
        transform: translateY(0);
    }
    
    100% {
        transform: translateY(100%);
    }
}

@keyframes slideInFromTheRight {
    0% {
        transform: translateX(0);
    }
    
    100% {
        transform: translateX(100%);
    }
}

.follower-container
{
    display: flex;
    font-family: 'Roboto';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.left-square-container
{
    width: 75px;
    height: 75px;
    background: #313131;
    animation: 1s 1s 1 slideInFromAbove;
}

.right-retangle-container
{
    width: 500px;
    height: 75px;
    background: #212121;
    animation: 1s 2s 1 slideInFromTheLeft;
}

.header
{
    font-size: 24px;
    color: #ffffff;
    text-align: center; /*vertical alignment of text*/
    position: relative; /*horizontal alignment of text*/
    top: 50%; /*horizontal alignment of text*/
    transform: translateY(-50%); /*horizontal alignment of text*/
    margin: 10px, 10px, 10px, 10px; /*GOT TO HERE, THIS COULD BE CAUSING TWITCHING*/
}

.keyword:not(.user_message) 
{
    color: #0d47a1;
}