JSFiddle - React, Tailwind, and code Playground

Alerts & Messages for clientReponse V2

by Jennifer Perrin

HTML

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cuprum"/>

<div class="alertMsg notice">
    <span>Notice:</span> This is a normal notice message. <a class="alert-close" href="#">×</a></div>
<div class="alertMsg warning">
    <span>Warning!</span> Something is wrong somewhere. Better go look... <a class="alert-close" href="#">×</a></div>
<div class="alertMsg success">
    <span>Success is Yours!</span> You successfully did something somewhere. <a class="alert-close" href="#">×</a>
</div>
<div class="alertMsg error">
    <span>Oh Error!</span> Change a few things and try submitting again. <a class="alert-close" href="#">×</a></div>
<div class="alertMsg info">
    <span>Hey!</span> This alert is in need of your attention, but it’s not super important. <a class="alert-close" href="#">×</a>
</div>

CSS

body { font-family: 'Cuprum'; margin: 20px; }

.alertMsg {
    border: 1px solid;
    font-size: 14px;
    line-height: 1.5em;
    margin: 0 0 20px;
    padding: 12px 30px 10px 20px;
    position: relative;
    color: #444;
}
.alertMsg span {
    font-size: 16px;
}

.alertMsg .alert-close {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAXElEQVR4XnXPsQ1AIQgE0KsYAWf6NDoClfuP8CGAFEY63sUcwobwgVHDtlHwxIaCk9W26ZEY74iccxP0Ag3u96Pg8HDO6Oau7K6bO3qXv88lrKzsM1b9XYIzEucf0sMh9ZVCt9gAAAAASUVORK5CYII=) no-repeat scroll 0 0 transparent;
    display: block;
    height: 12px;
    opacity: 0.4;
    overflow: hidden;
    position: absolute;
    right: 10px;
    text-indent: -999px;
    top: 15px;
    width: 12px;
}
.alertMsg .alert-close:hover {
    opacity: 1;
}
.alertMsg.notice {
    background: #fff;
    border-color: #e8e8e8;
}
.alertMsg.warning {
    background: #fbeed5;
    border-color: #e4ddb7;
    color: #ad8643;
}
.alertMsg.success {
    background: #dff0d8;
    border-color: #c1e1b4;
    color: #468847;
}
.alertMsg.error {
    background: #f2dede;
    border-color: #e3bfbf;
    color: #b94a48;
}
.alertMsg.info {
    background: #d9edf7;
    border-color: #b7dbed;
    color: #3a87ad;
}

JavaScript

$(document).ready(function() {
    // Alert Notices
    $('.alertMsg .alert-close').each(function () {
        $(this).click(function() {
            $(this).parent().fadeOut("slow", function() {
                $(this).remove();
            });
        });
    });
    
});