JSFiddle - React, Tailwind, and code Playground

by Serg Gulich

HTML

<link rel="stylesheet" href="https://raw.github.com/daneden/animate.css/master/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script>
function notificate(head, text){
	
	var icon = 'fa fa-times';
	var iconcolor = '#fff';
	
  
	newbox = '<div id="notification"><div class="icon"><i class="fa fa-exclamation-triangle" style="color:' + iconcolor + ';"></i></div><b>' + head + '</b><p>' + text + '</p></div>';
	
	notifications.innerHTML = notifications.innerHTML + newbox;
}
</script>

<div onclick="notificate('Заголовок', 'Содержание уведомления');" style="padding:10px;border-radius:5px;background:#fff;display:inline-block;cursor:pointer;">Вывести уведомление</div>
    <div id="notifications">
			
		</div>

CSS

#notifications{
	position:fixed;
	left:20px;
	bottom:0px;
	width:400px;
}

#notification{
	width:100%;
	height:100px;
	background:#303030;
	box-shadow:0px 0px 10px #222 ;
	margin: 0 0 20px 0 ;
	transition:all ease-in-out 0.05s;
	position:relative;
	left:0;
	opacity:1;
	transform:scale(1);
	cursor:pointer;
	animation-delay: 5s;
}

#notification:active{
	transform:scale(0.97);
}

#notification .icon{
	width:100px;
	height:100px;
	background:#282828;
	float:left;
}

#notification .icon i{
	color:#e74c3c;
	font-size:50px;
	margin:25px;
	width:50px;
	text-align:center;
}

#notification p{
	float:left;
	margin:15px;
	display:block;
	color:#ccc;
	width:270px;
	margin-top:5px;
}

#notification p b{
	margin:0;
}

#notification b{
	float:left;
	margin:10px 15px;
	display:block;
	color:#ccc;
	margin-bottom:0;
	font-weight:900;
}