JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="notzi"></div><!-- HERE IS WHERE THE NOTY WILL APPEAR-->

CSS

#notzi {    
    max-width: 100%;
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
    font-weight: bold;    
    z-index: 1031;
    text-align: center;
    position: fixed;
    cursor: pointer;
}

.alerted-notzi {
    margin-bottom: 2px !important;
    border-radius: 0px !important;
}

JavaScript

function notzi(message, iconStatus, type) {
    
    var html =  '<div class="alerted-notzi alert  alert-' + type + ' page-alert">';
    html +=     '<i class="fa ' + iconStatus + '"' + '></i> ';
    html +=     message;
    html +=     '</div>';
    
    $(html).hide().prependTo('#notzi').slideDown(200);
};

$( function () {
    notzi('success', 'fa-check', 'success');
    notzi('warning', 'fa-exclamation', 'warning');
    notzi('danger', 'fa-bomb', 'danger');
    notzi('info', 'fa-info', 'info');
    
    $('.page-alert').click( function (e) {
        e.preventDefault();
        $(this).closest('.page-alert').slideUp(200);
    });
    
});