JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<a href="#" class="apo1">Яичное уведомление</a>
<a href="#" class="apo2">Зелёное уведомление</a>
<a href="#" class="apo3">Баклажановое уведомление</a>

<section>
    <div class="tn-box tn-box-color-1">
        <p>Ложки нет!</p>
        <div class="tn-progress"></div>
    </div>
    <div class="tn-box tn-box-color-2">
        <p>Я просто зелёное уведомление!</</p>
            <div class="tn-progress"></div>
    </div>
    <div class="tn-box tn-box-color-3">
        <p>А я ленивая жопа, которая дольше всех сваливает с экрана</p>
        <div class="tn-progress"></div>
    </div>
</section>

CSS

.tn-box {
    width: 360px;
    position: relative;
    margin: 0 auto 20px auto;
    padding: 25px 15px;
    text-align: left;
    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    cursor: default;
    display: none;
}
.tn-box p {
    font-weight: bold;
    font-size: 16px;
    margin: 0;
    padding: 0 10px 0 60px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}
.tn-box p:before {
    text-align: center;
    border: 3px solid rgba(255, 255, 255, 1);
    margin-top: -17px;
    top: 50%;
    left: 20px;
    width: 30px;
    content:'i';
    font-size: 30px;
    color: rgba(255, 255, 255, 1);
    position: absolute;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.tn-progress {
    width: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    bottom: 5px;
    left: 2%;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 -1px 0 rgba(255, 255, 255, 0.6);
}
/* Colors */
 .tn-box-color-1 {
    background: #ffe691;
    border: 1px solid #f6db7b;
}
.tn-box-color-1 p {
    color: #7d5912;
}
.tn-box-color-2 {
    background: #99ffb1;
    border: 1px solid #7ce294;
}
.tn-box-color-2 p {
    color: #2d8241;
}
.tn-box-color-3 {
    background: #dd9aff;
    border: 1px solid #b367db;
}
.tn-box-color-3 p {
    color: #69288b;
}
/* If you use JavaScript you could add a class instead: */
 .tn-box.tn-box-active {
    display: block;
    -webkit-animation: fadeOut 5s linear forwards;
    -moz-animation: fadeOut 5s linear forwards;
    -o-animation: fadeOut 5s linear forwards;
    -ms-animation: fadeOut 5s linear forwards;
    animation: fadeOut 5s linear forwards;
}
.tn-box.tn-box-active .tn-progress {
    -webkit-animation:...

JavaScript

$('.apo1').click(function () {
    $('.tn-box-color-1').removeClass('tn-box-active');
    setTimeout(function () {
        $('.tn-box-color-1').addClass('tn-box-active');
    }, 100);
});

$('.apo2').click(function () {
    $('.tn-box-color-2').removeClass('tn-box-active');
    setTimeout(function () {
        $('.tn-box-color-2').addClass('tn-box-active');
    }, 100);
});

$('.apo3').click(function () {
    $('.tn-box-color-3').removeClass('tn-box-active');
    setTimeout(function () {
        $('.tn-box-color-3').addClass('tn-box-active');
    }, 100);
});