JSFiddle - React, Tailwind, and code Playground

Alert Messages for Reside V3

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
    <div class="alertMsg primary">
        <div class="msgIcon pull-left">
            <i class="fa fa-info-circle"></i>    
        </div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate provident nesciunt quae. 
        <a class="msgClose" title="Close" href="#"><i class="fa fa-times"></i></a>
    </div>
    
    <div class="alertMsg info">
        <div class="msgIcon pull-left">
            <i class="fa fa-bullhorn"></i>    
        </div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        <a class="msgClose" title="Close" href="#"><i class="fa fa-times"></i></a> 
    </div>
    
    <div class="alertMsg success">
        <div class="msgIcon pull-left">
            <i class="fa fa-check-square-o"></i>    
        </div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate provident nesciunt quae illo nisi officia accusamus libero sapiente magni animi esse id perferendis ex omnis quidem explicabo dicta ea velit.
        <a class="msgClose" title="Close" href="#"><i class="fa fa-times"></i></a>
    </div>
    
    <div class="alertMsg warning">
        <div class="msgIcon pull-left">
            <i class="fa fa-warning"></i>    
        </div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate provident nesciunt quae illo nisi officia accusamus libero sapiente magni animi esse id perferendis ex omnis quidem explicabo dicta ea velit.
        <a class="msgClose" title="Close" href="#"><i class="fa fa-times"></i></a>
    </div>
    
    <div class="alertMsg danger">
        <div class="msgIcon pull-left">
            <i class="fa...

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);

body {
    font-family:'Dosis', sans-serif;
    color: #4e555f;
    font-size: 16px;
}

.alertMsg {
    margin: 10px 0;
    padding: 10px 30px 10px 50px;
    position: relative;
}
.alertMsg a {
    display: block;
    position: absolute;
    top: 0px;
    right: 7.5px;
    color: #fff;
    text-decoration: none;
    font-size: 14pt;
    opacity: 0.4;
}
.alertMsg a:hover {
    opacity: 0.8;
}

.alertMsg .msgIcon {
    font-size: 20px !important;
    color: #ffffff;
    position: absolute;
    top: 7px;
    left: 15px;
}

.alertMsg.primary {
    border-left: 10px solid #2e79b9;
    background: #428bca;
    color: #ffffff;
}

.alertMsg.info {
    border-left: 10px solid #31a3c4;
    background: #46b8da;
    color: #ffffff;
}

.alertMsg.success {
    border-left: 10px solid #43a543;
    background: #5cb85c;
    color: #ffffff;
}

.alertMsg.warning {
    border-left: 10px solid #cd851e;
    background: #eea236;
    color: #ffffff;
}

.alertMsg.danger {
    border-left: 10px solid #c53734;
    background: #d9534f;
    color: #ffffff;
}

JavaScript

// Bootstrap v3.3.1
// Font Awesome 4.2.0

$('.msgClose').click(function(){
    $(this).closest('.alertMsg').fadeOut("slow", function() {
        $(this).addClass('hidden');
    });
});