JSFiddle - React, Tailwind, and code Playground

Alert Message (alertMsg) for Reside v2

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<div class="alertMsg primary">
    <span class="alertIcon"><i class="icon-bullhorn"></i></span>
    <a class="alertClose" href="#"><i class="icon-remove"></i></a>
    <div class="alertContent">
        <span class="alertTitle">Awesome</span>
        <div class="alertText">These Alerts are!</div>
    </div>
</div>

<div class="alertMsg info">
    <span class="alertIcon"><i class="icon-info-sign"></i></span>
    <a class="alertClose" href="#"><i class="icon-remove"></i></a>
    <div class="alertContent">
        <span class="alertTitle">Heads up!</span>
        <div class="alertText">This alert needs your attention, but it's not super important.</div>
    </div>
</div>

<div class="alertMsg success">
    <span class="alertIcon"><i class="icon-check"></i></span>
    <a class="alertClose" href="#"><i class="icon-remove"></i></a>
    <div class="alertContent">
        <span class="alertTitle">Well Done</span>
        <div class="alertText">You successfully read this important alert message.</div>
    </div>
</div>

<div class="alertMsg warning">
    <span class="alertIcon"><i class="icon-warning-sign"></i></span>
    <a class="alertClose" href="#"><i class="icon-remove"></i></a>
    <div class="alertContent">
        <span class="alertTitle">Warning</span>
        <div class="alertText">Best check yo self, you're not looking too good.</div>
    </div>
</div>

<div class="alertMsg danger">
    <span class="alertIcon"><i class="icon-remove-sign"></i></span>
    <a class="alertClose" href="#"><i class="icon-remove"></i></a>
    <div class="alertContent">
        <span class="alertTitle">Oh snap!</span>
        <div class="alertText">Change a few things up and try submitting again.</div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body { margin: 50px; font-family: 'Open Sans'; }
    
.alertMsg {
    -moz-box-sizing: border-box;
    background-color: #dcdcdc;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
    display: inline-block;
    float: left;
    min-height: 60px;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.alertMsg > .alertIcon {
    bottom: 0;
    display: inline-block;
    left: 0;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 0;
    width: 80px;
}

.alertMsg > .alertIcon > i {
    color: #ffffff !important;
    display: inline-block;
    font-size: 36px;
    font-weight: normal;
    margin-top: 18px;
}

.alertMsg > .alertContent {
    -moz-box-sizing: border-box;
    background-color: #f0f0f0 !important;
    color: #666666 !important;
    display: inline-block;
    float: right;
    font-size: 90%;
    min-height: 60px;
    padding: 15px 20px;
    width: calc(100% - 80px);
}
.alertMsg > .alertContent > .alertTitle {
    display: inline-block;
    float: left;
    font-weight: bold;
    margin-bottom: 5px;
    width: 100%;
    text-transform: uppercase;
}

.alertMsg > .alertClose {
    color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    font-size: 16px;
    line-height: 16px;
    opacity: 0.6;
    position: absolute;
    right: 15px;
    text-decoration: none;
    top: 12px;
}
    .alertMsg > .alertClose:hover { opacity: 1; }

.alertMsg > .alertContent > .alertText {
    display: inline-block;
    float: left;
    width: 100%;
}

.alertMsg.primary {
    background-color: #428bca;
    color: #ffffff;
}
.alertMsg.info {
    background-color: #5bc0de;
    color: #ffffff;
}
.alertMsg.success {
    background-color: #5cb85c;
    color: #ffffff;
}
.alertMsg.warning {
    background-color: #f0ad4e;
    color: #ffffff;
}
.alertMsg.danger {
    background-color: #d9534f;
    color: #ffffff;
}

JavaScript

$('.alertMsg .alertClose').each(function() {
    $(this).click(function(e) {
        e.preventDefault();
        $(this).parent().fadeOut("slow", function() {
            $(this).remove();
        });
    });
});

// -------------------------------------

    /*
     * Function to show an Alert type Message Box
     *
     * @param string $title     The Alert Title
     * @param string $message   The Alert Message
     * @param string $icon      The Font Awesome Icon
     * @param string $type      The CSS style to apply
     * @return string           The Alert Box
     */
/*    function alertBox($title, $message, $icon = "", $type = "") {
		return "
				<div class=\"alertMsg $type\">
					<span class=\"alertIcon\">$icon</span>
					<a class=\"alertClose\" href=\"#\"><i class=\"icon-remove\"></i></a>
					<div class=\"alertContent\">
						<span class=\"alertTitle\">$title</span>
						<div class=\"alertText\">$message</div>
					</div>
				</div>
			";
    }
*/