JSFiddle - React, Tailwind, and code Playground

by ramesh valasa

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="container">
<div class="pn-notification">
			<span class="pn-notification-icon"></span>
			<span class="pn-notification-text pn-openSansRegular-13">It is a slide which will close in 5 secs</span>
</div>

<button class="click">
click to side
</button>
<button class="cancel">
click to cancel
</button>
</div>

CSS

.container {
      width: 300px;
    background-color: greenyellow;
    height: 300px;
    position: relative;
}

.pn-notification {
  background-color: rgba(255, 218, 102, 0.9);
  border-radius: 2px;
  position: fixed;
  right: -305px;
  top: 67px;
}

.pn-notification-icon {
  
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ffc200;
  border-radius: 2px 0 0 2px;
  display: table-cell;
  width: 36px;
}

.pn-notification-text {
  color: #3f4751;
  display: table-cell;
  padding: 11px 24px 13px;
  line-height: 1.3;
  width: 220px;
}

JavaScript

(function() {

    notification = function notification() {
        var tap = true;
        var notificationEl = $(".pn-notification");
        var notificationTextEl = $('.pn-notification-text');

        // starts sliding with a delay to opacity 0 and then removes the notification.
        function _startSliding(aDelay) {
            notificationEl.animate({
                right: 0
            }, {
                queue: false,
                duration: aDelay,
                easing: 'linear',
                complete: function() {
                    _removeNotification(5000);
                }
            });
            tap = true;
        };

        // Removes the notification with a dealy and sets the opacity to 1.
        function _removeNotification(aDelay) {

            notificationEl.stop().animate({
                opacity: 0
            }, {
                queue: false,
                duration: aDelay,
                complete: function() {

                    $(this).animate({
                        right: '-305px'
                    }, {
                        complete: function() {
                            $(this).css({
                                opacity: 1
                            })
                        }
                    });
                }
            });
        };

        // stop the animation and sets the opacity to 1 to show message.
        function _stopSliding() {
            notificationEl.stop().animate({
                opacity: 1
            });
            tap = false;
        };

        function _init(aMessage) {

            // inserting the message to the display text element.
            notificationTextEl.html(aMessage);

            /*
             * Listeners for mouse leave and enter,
             * touch event for tablet.
             */
            notificationEl.one('mouseenter', function() {
                    _stopSliding();
                })
                .one('mouseleave',...