JSFiddle - React, Tailwind, and code Playground

by Filipp Dernovoy

HTML

<button id="show">Показать Push-уведомление</button>
<div id="push" class="push">
    <div id="close" class="close"></div>
    <h1>Уведомление!</h1>
    <p>Текст уведомления может быть достаточно длинным и разнообразным.</p>
    <h2>С подзаголовками</h2>
    <p>Текст уведомления может быть достаточно длинным и разнообразным. Текст уведомления может быть достаточно длинным и разнообразным. Текст уведомления может быть достаточно длинным и разнообразным. Текст уведомления может быть достаточно длинным и разнообразным.</p>
</div>

CSS

.push {
    background: white;
	position: fixed;
	right: 0;
    /* для bottom подобранное с запасом значение из-за минимальной высоты */
	bottom: -500px;
	box-shadow: 0 0 8px #000;
	border-radius: 3px;
	padding: 10px 40px 10px 20px;
	margin: 8px;
	min-height: 116px;
	max-height: 25vh;
    z-index: 100000;
	width: 400px;
    overflow: hidden;
    transition: bottom .5s ease-out;
}
.push::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 30px;
    background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
    pointer-events: none;
}
.push.show {
    bottom: 0;
}
.close {
    background: url(http://nextwave.org.au/wp-content/themes/nextwave0714/images/close-button-black.png);
    width: 16px;
    height: 16px;
    position: absolute;
    right: 8px;
    top: 8px;
    cursor: pointer;
}

/* стили для содержимого для примера */
h1, h2, p { margin: 0 0 10px; }

JavaScript

document.getElementById('show').onclick = function() {
    document.getElementById('push').className = 'push show';
    return false;
}
document.getElementById('close').onclick = function() {
    document.getElementById('push').className = 'push';
    return false;
}