JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="messagestack">
        <div class="confirmation">
            A green confirmation message!
        </div>
        <div class="notice">
            A massively long, multi-line-spreading notice message with a lot of information within to be read.
        </div>
        <div class="warning">
            An orange warning message!
        </div>
        <div class="error">
            A red error message!
        </div>
        <div class="loading">
            Loading data is in progress...
        </div>
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div>
        Lorem...

CSS

body {
    font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #333;
}

#messagestack {
	position: absolute;
	bottom: 14px;
	right: 5px;
	z-index: 50000;
	width: auto;
	height: auto;
	max-height: 85%;
	overflow-y: auto;
	padding: 2px;
}

#messagestack div {
	display: block;
	position: relative;
	width: 280px;
	height: auto;
	min-height: 16px;
	margin: 3px 2px 5px 2px;
	color: #555;
	font-weight: bold;
	padding: 8px 10px 7px 30px;
	border-radius: 4px;
    
	background: rgba(64,64,64,0.9);
    background: -moz-linear-gradient(top,  rgba(64,64,64,0.9) 0%, rgba(48,48,48,0.9) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,64,64,0.9)), color-stop(100%,rgba(48,48,48,0.9)));
	background: -webkit-linear-gradient(top,  rgba(64,64,64,0.9) 0%,rgba(48,48,48,0.9) 100%);
	background: -o-linear-gradient(top,  rgba(64,64,64,0.9) 0%,rgba(48,48,48,0.9) 100%);
	background: -ms-linear-gradient(top,  rgba(64,64,64,0.9) 0%,rgba(48,48,48,0.9) 100%);
	background: linear-gradient(to bottom,  rgba(64,64,64,0.9) 0%,rgba(48,48,48,0.9) 100%);

	color: #ebebeb;
	text-shadow: 0 1px 1px #000;
    border: 1px solid #999;
    box-shadow: 0 2px 4px 0 #333;
	cursor: default;
}

#messagestack div:after {
	content: "";
	position: absolute;
	top: 0;
	left: 4px;
	width: 20px;
	height: 24px;
	background: url(http://docs.roundcube.net/static/messages_dark.png) 0 6px no-repeat;
}

#messagestack div.warning {
	color: #f4bf0e;
}

#messagestack div.warning:after {
	background-position: 0 -84px;
}

#messagestack div.error {
	color: #ff615d;
}

#messagestack div.error:after {
	background-position: 0 -55px;
}

#messagestack div.confirmation {
	color: #00e05a;
}

#messagestack div.confirmation:after {
	background-position: 0 -25px;
}

#messagestack div.loading {
	color: #ddd;
}

#messagestack div.loading:after {
	top: 4px;
	left: 6px;
	background: url(http://docs.roundcube.net/static/ajaxloader_dark.gif) 0 4px no-repeat;
}