JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div class="errorm msgClose"><p>Message</p></div> 
 <div class="successm msgClose"><p>Message</p></div> 
 <div class="errorm msgClose"><p>Message</p></div> 
 <div class="successm msgClose"><p>Message</p></div>
 <div class="errorm msgClose"><p>Message</p></div> 
 <div class="successm msgClose"><p>Message</p></div> 
 <div class="errorm msgClose"><p>Message</p></div> 
 <div class="successm msgClose"><p>Message</p></div>

CSS

.errorm, .successm {
margin:20px;
font-weight:bold;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:1px;
position:relative;
}

.errorm p, .successm p {
display:block;
margin:0;
padding:8px 20px 7px 10px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

.errorm {
background-color:#d29191;
background-image:-webkit-gradient(linear, left top, left bottom, from(#d29191), to(#bb5e5e));
background-image:-webkit-linear-gradient(top, #d29191, #bb5e5e);
background-image:-moz-linear-gradient(top, #d29191, #bb5e5e);
background-image:-ms-linear-gradient(top, #d29191, #bb5e5e);
background-image:-o-linear-gradient(top, #d29191, #bb5e5e);
background-image:linear-gradient(top, #d29191, #bb5e5e);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#d29191', EndColorStr='#bb5e5e');
-webkit-box-shadow:0px 0px 6px rgba(244,187,187,0.7);
-moz-box-shadow:0px 0px 6px rgba(244,187,187,0.7);
box-shadow:0px 0px 6px rgba(244,187,187,0.7);
}

.errorm p {
display:block;
margin:0;
background-color:#f4baba;
background-image:-webkit-gradient(linear, left top, left bottom, from(#f4baba), to(#db7f7f));
background-image:-webkit-linear-gradient(top, #f4baba, #db7f7f);
background-image:-moz-linear-gradient(top, #f4baba, #db7f7f);
background-image:-ms-linear-gradient(top, #f4baba, #db7f7f);
background-image:-o-linear-gradient(top, #f4baba, #db7f7f);
background-image:linear-gradient(top, #f4baba, #db7f7f);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f4baba', EndColorStr='#db7f7f');
-webkit-box-shadow:inset 0px 1px 0px #f7d0d0;
-moz-box-shadow:inset 0px 1px 0px #f7d0d0;
box-shadow:inset 0px 1px 0px #f7d0d0;
color:#745050;
text-shadow:1px 1px 0px #eaadad;
}

.errorm p:after {
content:'\2718';
position:absolute;
top:10pxpx;
right:10px;
font-size:16px;
}

.successm {
background-color:#c6cdaa;
background-image:-webkit-gradient(linear, left top, left bottom, from(#c6cdaa),...

JavaScript

$('.msgClose').live('click', function(){
    var $msg = $(this);
    
    $msg.fadeTo(300, 0, function(){
        $msg.slideUp(300, function(){
            $msg.remove();
        });
    });
});