JSFiddle - React, Tailwind, and code Playground

by Gerónimo Garcia Sgritta

HTML

<div id="box"> 
<div class="alert alert-error notification-relative invisible">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>Oh snap!</strong> Change a few things up and try submitting again.
    </div>
</div>

<button id="show">Show notification</button>
<button id="create">Create notification</button>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
}

strong {
    font-weight:bold;        
}

.invisible {
    opacity: 0;        
}

.notification-relative {
    position: relative;
    top: -35px;
}

#box {
    min-height: 300px;
    max-height: 600px;
    padding: 0 10px;
    width: 85%; 
    margin:15px auto 0 auto; 
    border: 3px solid blue; 
    overflow:hidden;    
}

.alert {
    box-shadow: 0px 12px 15px -11px rgba(102, 102, 102, 0.4);
-webkit-box-shadow: 0px 12px 15px -11px rgba(102, 102, 102, 0.4);
-moz-box-shadow: 0px 12px 15px -11px rgba(102, 102, 102, 0.4);
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    color: #c09853;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.alert-danger, .alert-error {
    background-color: #b94a48;
    color: #f2dede;
    border-color: #b94a48;
    /*border-color: #eed3d7;*/
}        

.alert .close {
    position: relative;
    top: -2px;
    right: -21px;
    line-height: 20px;
}

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}

.close {
    float: right;
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    color:#FFFFFF;
    /*color: #000000;*/
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    opacity: 0.8;
    filter: alpha(opacity=80);
}

JavaScript

var el = '[data-dismiss="alert"]',
    notif = '<div class="alert alert-error notification-relative"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Oh snap!</strong> Change a few things up and try submitting again.</div>',
    initialHeight = '-35px';

function show(e){
    var $el = $(el).parent(),
        position = $el.position();
    $el.animate({
        top: position.top + $el.height(),
        opacity: 1
    }).fadeIn(300);    
}

function hide(e){
    var $el = $(el).parent(),
        position = $el.position();
    $el.animate({
        top: initialHeight,
        opacity: 0
    });    
}


$('#show').toggle(function(e){
                      show();
                      $(this).text('Hide notification');
               }, function(e){
                      hide();
                      $(this).text('Show notification');
               });

$('#create').click(function(e){
    var found = !!$('alert').length;    
    if(found) return;
    
    $(notif).appendTo('#box');
});

$(el).click(function(e){
    hide();
    $('#show').text('Show notification');
})