JSFiddle - React, Tailwind, and code Playground

HTML

<div id="notification-container">
    <span class="notification" id="success-notification">Registration complete. Please check your mail.</span>
    <span class="notification" id="alert-notification">Account already activated.</span>
    <span class="notification" id="information-notification">Please check you email.</span>
    <span class="notification" id="error-notification">Wrong login detials.</span>
</div>

CSS

#notification-container {
    position:absolute;
    bottom:0px;
    right:21px;
}
.notification {
	padding: 15px;
	margin-bottom: 20px;	
	border: 1px solid #eed3d7;
	border-radius: 4px;
	bottom: 0px;
    right: 21px;
	float: right; 
	display: inline-block;
    margin-right:5px;
}
#success
{
  color: white;
  background-color: #37BC9B;
}

#alert-notification
{
  color: white;
  background-color: #DA4453;
}

#success-notification
{
  color: white;
  background-color: #37BC9B;
}
#information-notification {
  color: white;
  background-color: #4A89DC;
}
#error-notification {
  color: white;
  background-color: #DA4453;
}