JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<div id="content">
The best death-overs bowler in the game went up against the best finisher in the business with four to defend off the last ball. It was only fair that neither Lasith Malinga nor MS Dhoni ended up on the losing side of that contest. Malinga's wide full-length ball would have hoodwinked most batsmen who would have been setting themselves up for the swing to the leg side. Not the fleet-footed Dhoni, though, who calmly stretched across and carved high over the covers even as he teetered on one foot. The ball didn't have the strength to beat Sachithra Senanayake on the boundary, but Dhoni and last-man Umesh Yadav bounded through for three runs to tie a nerve-wracking classic at the Adelaide Oval.

The beauty of the ODI format shone throughout the duration of the chase, with the best minds in the game feeling the pressure of a close finish. India were coasting on the back of another polished effort from Gautam Gambhir, whose faultless 91 showed he has moved on well from his Test-match woes. Dhoni had added 60 runs with Gambhir off 12.5 overs, leaving India needing 59 off 58. At that stage, Dhoni made the first decisive error, when he sold Gambhir dear after calling him for a single. Gambhir was caught short by a direct hit from Nuwan Kulasekara, and his fall gave Sri Lanka an opening; Dhoni would later say it cost India victory.
</div>

CSS

.notification{
    cursor: pointer;
    border-bottom: 2px solid #9cbdff;
        border-left: 2px solid #9cbdff;
        border-right: 2px solid #9cbdff;
    position: absolute;
    display: block;
    padding: 4px;
    top: 0px;
    left: 40px;
    right: 40px;
    height: 25px;
    background-color: #FFF;
    text-align: center;
    color: #1B5266;
    font-size: 14px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    -moz-border-bottom-left-radius: 4px;
    -moz-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    box-shadow: 2px 2px 20px #9cbdff;
    -moz-box-shadow: 2px 2px 20px #9cbdff;
    -webkit-box-shadow: 2px 2px 20px #9cbdff;
}

JavaScript

$(function() {

    var notify = function(msg, timeout) {
        var $box = $('<div/>').addClass('notification');
        $box.html(msg);
        $($box).click(function(){
        $(this).remove();                    
        });
        
        $('#content').prepend($box);
        $('.notification').mouseenter(function(){
            $(this).stop(true);             
        }).mouseleave(function(){
            $('.notification').delay(timeout/2).slideUp(100, function(){
            $(this).remove();
        });
            
        });
        
        $('.notification').delay(timeout).slideUp(100, function(){

            $(this).remove();
    });
    };
    setTimeout(function(){
    return notify('This is a notification', 4000);
    }, 1000);

});