JSFiddle - React, Tailwind, and code Playground

by Amal Das

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="toaster errorMsgBlock" id="snackbar"><span class="imgerror"></span><p>Some Text Here...</p></div>

CSS

.toaster.successMsgBlock {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: #e3f7e8;
    width: 100%;
    padding: 17px;
    border-left: 8px solid #00ac31;
    -webkit-box-shadow: 0 1px 14px 0 rgba(0, 0, 0, 0.12), 0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 14px 0 rgba(0, 0, 0, 0.12), 0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 14px 0 rgba(0, 0, 0, 0.12), 0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
    font-family: '3MCircular-Book';
    font-size: 16px;
    font-weight: normal;
    line-height: 1.25;
    color: #323234;
}
.toaster.errorMsgBlock {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: #ffdbdb;
    width: 100%;
    padding: 17px;
    border-left: 8px solid #ff0000;
    -webkit-box-shadow: 0 1px 14px 0 rgba(0, 0, 0, 0.12), 0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 14px 0 rgba(0, 0, 0, 0.12), 0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 14px 0 rgba(0, 0, 0, 0.12), 0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
    font-family: '3MCircular-Book';
    font-size: 16px;
    font-weight: normal;
    line-height: 1.25;
    color: #323234;
}
.imgsuccess {
    background-image: url("../images/Icons/affirmation-icon-2.png");
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    margin: 0 10px 0 0;
}
.imgerror {
    background-image: url("../images/Icons/serious-icon.png");
    background-repeat: no-repeat;
    width: 23px;
    height: 23px;
    margin: 0 10px 0 0;
}
.toaster span {
    float: left;
}
    .toaster img:after {
        content: '';
        display: table;
        clear: both;
    }
    .toaster p {
        margin: 2px 0;
        padding: 0 8px;
        display: inline-block;
        vertical-align: middle;
    }

JavaScript

function bounce(bouncingCount, speed) {
                var top = -100;
                var speedRatio = speed / top;
                var heightRatio = top / bouncingCount;

                for (var i = 1; i <= bouncingCount; i++) {
                    $('#snackbar').animate({
                        'top': 0
                    }, speed);
                    $('#snackbar').animate({
                        'top': 0
                    }, speed / 2);
                    top = top - (heightRatio);
                    speed = speedRatio * top;
                }
            }
            var a = setTimeout(function (e) {
                $('#snackbar').show("slow");
                bounce(1, 500);
            }, 9000);